我可以在伪选择器图像之前或之后放置边框半径吗？

Question

我是否有办法在a：之前或之后获得边界半径：在我将内容中添加图片url（）之后：＆＃39;＆＃39;属性？

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

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;
}