大屏展示边框太丑？纯css撸9个实用边框（性能提高120%） |
您所在的位置：网站首页 › 标题的边框怎么设计的 › 大屏展示边框太丑？纯css撸9个实用边框（性能提高120%） |
大屏展示边框太丑？纯css撸9个实用边框（性能提高120%）
|
这是我参与8月更文挑战第8月更文挑战第5天，活动详情查看：8月更文挑战 项目中做过大屏数据展示的应该都使用过Datav，里面有很多酷炫边框。 但是他有个致命的问题，严重消耗内存。 之前在项目中使用，每次打开小风扇呼呼的转，没一会电脑就可以当暖宝宝了😂后来才发现是Datav的问题。而且边框加载也会出现很多奇奇怪怪的问题。 为了一个边框至此实在不值得，所以今天抽空用纯css撸了九款边框效果，总有一款适合你。 直接看所有效果： （补上不用放大镜的静态图😏）
通过改变border的边框属性，可以实现不同的效果，在此基础上还可以修改border-top、border-bottom，border-left、border-right，单独的给顶宽度和颜色。 从第七号闪烁边框详解，它主要是用到animation动画，给边框加上阴影得到的闪烁效果 .item7 { border: 4px solid #FFFF66; padding-top: 10%; -webkit-animation: twinkling 1s infinite ease-in-out; /*1秒钟的开始结束都慢的无限次动画*/ } @-webkit-keyframes twinkling{ /*透明度由0到1*/ 0% { border-color: #FFFF66; box-shadow: 0 0 10px rgba(0,255,0,.2), inset 0 0 10px rgba(0,255,0,.1), 0 1px 0 #393; } 100% { border-color: #6f6; box-shadow: 0 0 25px rgba(0,255,0,.6), inset 0 0 15px rgba(125, 231, 125, 0.4), 0 1px 0 #6f6; } } 复制代码注意不同浏览器的的兼容性（-webkit、-moz-、-ms-、-o-） 8号边框：其实是视觉上的错觉，以为它是线条滚动效果 8号滚动线条边框 .item8 { width: 100%; background: repeating-linear-gradient(135deg, transparent, transparent 3px, rgb(228, 161, 85) 3px, rgb(240, 118, 118) 8px); animation: shine 1s infinite linear; overflow: hidden; } .content { height: 55px; margin: 6px; padding: 10%; background-color: #010629; } @-webkit-keyframes shine { 0% { background-position: -1px -1px;} 100% { background-position: -12px -12px;} } 复制代码repeating-linear-gradient() 函数用于创建重复的线性渐变 "图像" CSS语法： background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...); 复制代码先给它设置好重复线性渐变，然后添加animation动画。 9号边框和8号虽然效果上差别很大，但是使用的属性很接近，它使用的是线性渐变：linear-gradient title 9号四角高亮边框 .item9 { padding-top: 12%; background: linear-gradient(to left, #2CD5FF, #2CD5FF) left top no-repeat, linear-gradient(to bottom, #2CD5FF, #2CD5FF) left top no-repeat, linear-gradient(to left, #2CD5FF, #2CD5FF) right top no-repeat, linear-gradient(to bottom, #2CD5FF, #2CD5FF) right top no-repeat, linear-gradient(to left, #2CD5FF, #2CD5FF) left bottom no-repeat, linear-gradient(to bottom, #2CD5FF, #2CD5FF) left bottom no-repeat, linear-gradient(to left, #2CD5FF, #2CD5FF) right bottom no-repeat, linear-gradient(to left, #2CD5FF, #2CD5FF) right bottom no-repeat; background-size: 4px 20px, 20px 4px, 4px 20px, 20px 4px; border: 1px solid #073F97; position: relative; } .item9 span { display: inline-block; width: 35%; background:#05286C; font-size: 14px; position: absolute; top: 0; left: 32%; padding: 4px 0px; color: #19E8FE; border-radius: 0 0 10px 10px; } 复制代码background-image: linear-gradient(direction, color-stop1, color-stop2, ...);direction ：用角度值指定渐变的方向（或角度）color-stop1：指定渐变的起止颜色 后期项目中实现好看的再补充😁 |
【本文地址】
今日新闻 |
推荐新闻 |