用CSS画一个圆形

原创
2017/01/04 10:58
阅读数 870

目前想到了两种方法。

Border-Radius

这种是作用于元素本身的,非常常见。

border-radius: 50%;
height: 100px;
width: 100px;

Background

利用径向渐变可以得到一个圆形扩散的背景,然后设置合适的大小,可以得到近似圆形的效果。

background: radial-gradient(circle,#f00 47%,transparent 48%) 2px center/6px 6px no-repeat;

注意不是完美的圆形,因此不宜过大。一个使用场景是,用于展示类似列表效果的长文本:

bg-circle

完整代码如下:

background: radial-gradient(circle,#f00 47%,transparent 48%) 2px center/6px 6px no-repeat;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
padding-left: 10px;

*Update: *这种效果不佳,现在推荐用list-style-image搭配svg实现。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部