css实现四角边框效果

沙漠渔溏 / 2024-10-22 21:25:11 / 共计1,921 字

10/22

温馨提示：

本文最后更新于 2024-10-22，若内容或图片失效，请留言反馈。部分素材来自网络，若不小心影响到您的利益，请联系我们删除。

css实现四角边框

html：

   <div
            class="box"
            v-for="(item, index) in coldBaseInfo.stationModelList"
            :key="index"
          >
            <div class="boxleft">
              <img :src="photo[index]" alt="Image" />
            </div>

vue2：

  photo: [
        require("@/assets/img/bigscreen/two.jpg"),
        require("@/assets/img/bigscreen/four.png"),
        require("@/assets/img/bigscreen/five.jpg"),
        require("@/assets/img/bigscreen/ten.jpg"),
      ],

css：

.boxleft {
  background: linear-gradient(to left, #04C886, #04C886) left top no-repeat,
        linear-gradient(to bottom, #04C886, #04C886) left top no-repeat,
        linear-gradient(to left, #04C886, #04C886) right top no-repeat,
        linear-gradient(to bottom, #04C886, #04C886) right top no-repeat,
        linear-gradient(to left, #04C886, #04C886) left bottom no-repeat,
        linear-gradient(to bottom, #04C886, #04C886) left bottom no-repeat,
        linear-gradient(to left, #04C886, #04C886) right bottom no-repeat,
        linear-gradient(to left, #04C886, #04C886) right bottom no-repeat;
    background-size: 2px 10px, 10px 2px, 2px 10px, 10px 2px;
  img {
    width: 100%;
    height: 100%;
    padding: 4px;
    border: 2px solid #7fb1c580;
  } 
}

到此这篇关于css实现四角边框效果的文章就介绍到这了,更多相关css四角边框内容请搜索『沙漠渔溏』以前的文章或继续浏览下面的相关文章，希望大家以后多多支持『沙漠渔溏』！