我要评论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四角边框内容请搜索代码网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持代码网！
发表评论