css实现四角边框效果

css实现四角边框效果

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实现四角边框效果