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;
  } 
 
}
相关推荐
三月的一天4 分钟前
在 React Three Fiber 中实现 3D 模型点击扩散波效果
前端·react.js·前端框架
爱敲代码的小冰4 分钟前
npm 切换 node 版本 和npm的源
前端·npm·node.js
DoraBigHead10 分钟前
🧠【彻底读懂 reduce】acc 是谁?我是谁?我们要干嘛?
前端·javascript·面试
future141221 分钟前
项目开发日记
前端·学习·c#·游戏开发
汪子熙30 分钟前
CSS 中 td:last-child a 选择器详解
前端·javascript
q5673152337 分钟前
Koa+Puppeteer爬虫教程页面设计
javascript·css·爬虫
北北~Simple44 分钟前
第一次搭建数据库
服务器·前端·javascript·数据库
GanGuaGua1 小时前
Vue3常用指令
前端·javascript·vue.js
欧阳天风1 小时前
录音实时上传
前端·javascript
江号软件分享1 小时前
从DNS到防火墙:NetDisabler多策略断网方法详解
前端