前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >[代码片段]谷歌的一个不错的CSS样式,不得不说大厂的前端设计师美感就是好。

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

作者头像
紫旭Blog - blog.zixutech.cn
发布2020-08-24 11:49:54
3420
发布2020-08-24 11:49:54
举报
文章被收录于专栏:紫旭

代码

直接上效果图

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

拿走了拿走了#滑稽

使用方法

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

代码语言:javascript
复制
.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,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 代码
    • 使用方法
    • 测试效果
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档