Czy mogę umieścić promień obramowania na obrazie przed lub po pseudoobiekcie?

Question

Czy istnieje sposób, w jaki można uzyskać promień obramowania na: przed lub: po, kiedy umieścić URL obrazu() w treści: "Właściwość?

Answer 1

Wystarczy ustawić promień obramowania w regule CSS dla elementu :before lub :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; 
} 

Answer 2

Tak można użyć border-radius w pseudo-elementów ::after, ::before z tłem obrazka:

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

<div></div>