直接上效果图
我本来以为这个彩色的边框是个背景图片,看了一下源码竟然是个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测试个效果
我是测试效果的呢
哈哈哈,真的好看诶
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有