Ist es möglich, eine Umrisslinie mit Radius zu erstellen?

Question

Ich weiß, dass Sie einen Umrissrahmen mit CSS3 hinzufügen können.

outline: 10px solid red; 

Jetzt habe ich mich gefragt, wie ich dieser Umrandung auch einen Radius hinzufügen kann.

Ich habe dieses eine versucht, aber nicht funktioniert:

.radius { 
    padding: 20px 60px; 
    text-transform: capitalize; 

    -moz-outline: 10; 
    outline: 10px solid red; 

    -webkit-border-radius: 40px; 
    -moz-border-radius: 40px; 
    border-radius: 40px;  
} 

Answer 1

Firefox has a property -moz-outline-radius jedoch die Anforderung eine ähnliche Funktion in WebKit closed as WONTFIX war zu implementieren. Der Plan für die Zukunft lautet make the outlines follow the borders.

Ich weiß, das hilft nicht viel, aber die Antwort auf Ihre Frage lautet: derzeit, nein (nicht in einem Cross-Browser-Weg). In der Zwischenzeit sollten Sie einen alternativen Ansatz wie den von Kalaban vorgeschlagenen verwenden.

Answer 2

Versuchen CSS-Tricks' Infinite Borders technique und Anwendung border-radius verwenden.

Diese Methode erfordert Grenzen und box-shadow und nicht umreißen.

Here is the fiddle link

Answer 3

@MichaelYaeger Ähnliche Antwort auf user1685185, aber mit einer aktualisierten JSFiddle, verwenden Sie border-radius und box-shadow. Diese JS Fiddle wird mit einem "border" um eine kreisförmige Schaltfläche (bootstrap) angezeigt, aber dasselbe gilt auch für ein Bild usw.