border渐变圆角
作者:
hsqin | 来源:发表于
2020-09-26 14:24 被阅读0次
- 需求如下，红色方框，画一个渐变border的圆。但是sketch上识别的是 border-image：linear-gradient，实践后发现无法变成圆角。
需求图.png
- 网上搜索的实现方案
background-image和background-clip
.circle{
width: 46px;
height: 46px;
border-radius: 100%;
line-height: 46px;
text-align: center;
font-size: 24px;
font-weight: 400;
margin: 0 auto;
padding: 1px;
color: #2B435F;
background-image: linear-gradient(#fff, #fff), linear-gradient(156deg, #A7BDD5, #2B435F);
background-clip: content-box,padding-box;
}
本文标题：border渐变圆角
本文链接：https://www.haomeiwen.com/subject/ecvcuktx.html
网友评论