我可以在之前或之后的伪选择器图像上设置边界半径吗

Question

当我在content:''属性中放入图像url（）时，有什么方法可以获得：before或：after上的边界半径吗？

Answer 1

是的，您可以在具有背景图像的伪元素::after、::before中使用border-radius：

div:before {
  content: "";
  display: block;
  width: 200px;
  height: 100px;
  background-image: url(http://placehold.it/200x100);
  border-radius: 10px;
}

<div></div>

Answer 2

只需在CSS规则中为:before或:after元素设置边界半径。

JSFiddle

#container {
    background: red;
    width: 100px;
    height: 100px;
    position: relative;
    float: left;
}
#container:before {
    content: '';
    background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.svg?v=1bc6a0c03b68') blue;
    background-size: 1000px auto;
    width: 100px;
    height: 100px;
    border-radius: 50px;
    position: absolute;
}