css圆边框设置 |根据图片生成css

/* 第一种方法：border-radius */
.border {
border-radius: 50%;
}
/* 第二种方法：使用伪元素 */
.border {
position: relative;
}
.border:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 1px solid black;
box-sizing: border-box;
}
/* 第三种方法：使用background-image */
.border {
background-image: radial-gradient(circle, #000000 0%, #000000 100%);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100px;
height: 100px;
}
/* 第四种方法：使用clip-path */
.border {
clip-path: circle(50%);
}

border-radius是最常见的设置圆边框的方法，通过设置一个值即可控制圆弧的弧度大小。使用伪元素利用border-radius实现圆形边框也是一种比较实用的方法。

使用background-image设置圆形背景也很简单，只需要设置圆形的渐变就行了。

clip-path是CSS3新增的属性，可以通过指定各种形状的参数，设置任意形状的剪切区域，使用起来也非常方便。

总结来说，设置圆边框有多种方法，如border-radius、伪元素、background-image和clip-path等等。使用不同的方法可以根据实际情况进行选择，达到最佳的效果。