[代码片段]谷歌的一个不错的CSS样式,不得不说大厂的前端设计师美感就是好。

977次阅读
没有评论

共计 701 个字符,预计需要花费 2 分钟才能阅读完成。

代码

直接上效果图

%title插图%num

我本来以为这个彩色的边框是个背景图片,看了一下源码竟然是个 background 样式,看来我学识还是太浅。

拿走了拿走了 #滑稽

使用方法

实现这个效果需要 2 个 div 嵌套,外层的我取 class 为 outer-div,内层的我取 class 为 inner-div

.outer-div{background: linear-gradient(90deg,#34a853 4%,#4285f4 0%) top/100% 34% no-repeat,linear-gradient(90deg,#fbbc04 50%,#4285f4 0%) top/100% 82% no-repeat,linear-gradient(90deg,#fbbc04 10%,#ea4335 0%) top/100% 100%; 
width: 200px; 
/* set width yourself */
height: 350px;
/* set height yourself */
padding: 4px;
/* default padding is 4px, you can set any value that makes you feel good */
border-radius: 8px;
/* outer-div's border-radius must be twice larger than the inner-div */
}


.inner-div {
width: 100%;
height: 100%;
border-radius: 4px;
/* inner-div's border-radius must be twice lower than the outer-div */
}

 

测试效果

随便写个 DIV 测试个效果

我是测试效果的呢

哈哈哈,真的好看诶

正文完
 
紫旭
版权声明:本站原创文章,由 紫旭 2020-08-21发表,共计701字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)