CSS实现原型渐变边框

上面是需求的效果。

思路是利用background-image属性的多段线性渐变然后配合background-clip属性

 

    width:196px;

    height:196px;

    padding: 4px;

    box-sizing: border-box;

    background-image: linear-gradient(white, white), linear-gradient(53deg,rgba(125,144,255,1),rgba(207,146,255,1));

    background-clip: content-box,padding-box;

    border-radius:50%;

这里padding用来控制边框的宽

发布了10 篇原创文章 · 获赞 1 · 访问量 1万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览