css3 圆形 边框图片 |webpack配置postcss

.border-circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: url("circle.png") no-repeat center center;
background-size: contain;
}

上述代码中，大家定义了一个名为.border-circle的类选择器，将其应用在需要添加圆形边框图片的HTML元素上。其中，width和height属性设置元素的宽高为100px；border-radius属性设置元素的圆角半径为50%（因此总体上看起来是圆形的）；background属性则指定了使用名为circle.png的图片作为背景，且图片垂直居中水平居中显示。

值得注意的是，由于图片本身的大小可能与元素大小不一致，大家需要将background-size属性设置为contain，这样可以保证图片等比例缩放以适应元素大小。

除此之外，大家还可以通过其他CSS属性进一步完善圆形边框图片的样式，例如调整边框宽度、颜色、样式等。