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;
  } 
 
}
相关推荐
RoyLin3 分钟前
TypeScript设计模式:仲裁者模式
前端·后端·typescript
子兮曰7 分钟前
🚀前端依赖配置避坑指南:深度解析package.json中devDependencies的常见误解
前端·javascript·npm
瑶琴AI前端8 分钟前
【零成本高效编程】VS Code必装的5款免费AI插件,开发效率飙升!
前端·ai编程·visual studio code
forever_Mamba9 分钟前
实现一个高性能倒计时:从踩坑到最佳实践
前端·javascript
_AaronWong10 分钟前
实现一个鼠标滚轮横向滚动需求
前端·electron
子兮曰10 分钟前
浏览器与 Node.js 全局变量体系详解:从 window 到 global 的核心差异
前端·javascript·node.js
Olrookie11 分钟前
ruoyi-vue(十五)——布局设置,导航栏,侧边栏,顶部栏
前端·vue.js·笔记
召摇12 分钟前
API 设计最佳实践 Javascript 篇
前端·javascript·vue.js
光影少年12 分钟前
vite打包优化有哪些
前端·vite·掘金·金石计划
码间舞12 分钟前
文件太大怎么上传?【分组分片上传大文件】-实战记录
前端·vue.js·程序员