我能否在before或after伪元素选择器图像上添加边框半径？

Question

我能否在:before或:after中使用content:''属性的image url()时添加border-radius？

- Justin Wagner

---

你遇到了什么问题？ - A. Wolff

这是我得到的图片：http://puu.sh/gnCUu/302d26093b.png 如您所见，当我添加border-radius属性时，黑色边框变成了圆角，但是图像没有变化。我想要让图像变成圆形（并且我不打算使用黑色边框）。 - Justin Wagner

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>

- Alex Char

Answer 2

在您的CSS规则中为 :before 或 :after 元素设置border-radius即可。 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;
}

- Mateusz Mania

---

感谢回复。看起来，我是在使用缩放属性进行大小调整，并将图像放在内容属性中 - 当将其移动到背景属性时，我发现它消失了，因为我没有给它设置宽度和高度。问题现在已解决，谢谢。 - Justin Wagner