opera-logo
第一种
用伪素
▪ html
▪ css
div{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
border-radius: 50%;
background-image: linear-gradient(to bottom,#f78384,#90090a);
}
div:before {
content: '';
display: block;
width: 50px;
height: 80px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
background-color: #fff;
}
第二种 用径向渐变?
▪html
▪css
div{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
border-radius: 50%;
background-image: radial-gradient(ellipse 22px 41px,white 30px,transparent),
linear-gradient(to bottom,#f78384,#90090a);
}
关键是用两个,或者多个重叠,利用transparent这个颜色.
也许有高手,只需要一个radial-gradient就能解决
第三种 利用svg ,,
这个不熟悉,基本就是从手册中复制粘贴,组合一下,调整了一下数据
▪html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/bian-cheng-ji-chu/81631.html