css实现四角边框效果

ID:16105 / 打印

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 中的overscroll-behavior属性详解
下一篇: css边框修饰实现代码

作者:admin @ 24资源网   2024-10-30

本站所有软件、源码、文章均有网友提供,如有侵权联系308410122@qq.com

与本文相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。