◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。
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; } }
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。