css指定位置画圆,【翻译】4种CSS画圆的方法

四种方法

1. Border Radius

.circle {

background: #456BD9;

border: 0.1875em solid #0F1C3F;

border-radius: 50%;

box-shadow: 0.375em 0.375em 0 0 rgba(15, 28, 63, 0.125);

height: 5em;

width: 5em;

}

将border-radius设为50%是最常见、支持最广泛的方法。border-radius属性同时会影响边框、阴影，以及元素的点击面积。

2. SVG

SVG有circle元素，可以实现圆形。SVG的支持也很广泛，而且用作动画性能很好，但代码量略大。要注意，为了防止圆形视觉上被遮罩，确保圆的半径(如果有笔画宽度，也要加上)比SVG的viewBox略小一点。

3. Clip Path

.circle {

background: #456BD9;

clip-path: circle(50%);

height: 5em;

width: 5em;

}

Clip path是新的技术。支持也很广但一致性不足。Clip Path不会影响元素的布局，也就是说它不会影响边框，同时会隐藏outer shadow。取决于你所要达到的效果，这可能是有用的。

4. Radial Gradient

.circle {

background-image: radial-gradient(circle, #456BD9, #456BD9 66%, transpare