CSS: Multi Farbe Grenze

Question

Wie können wir Grenze wie dieses Bild erreichen, mit CSS?

Answer 1

Das ist ein aktuelles Design. Es könnte mit HTML5 JS erreicht werden, aber ich denke nicht, dass das ein CSS-Rahmen ist.

Answer 2

Sie können die Grenze Farbe transparent

border:10px solid transparent; 

Dann setzen Sie border-image-Eigenschaft verwenden, können ein Bild als Grenze zu verwenden. Zum Beispiel:

border-image: url(boder-img.png) 30 round; 
-webkit-border-image: url(boder-img.png) 30 round; /* Safari 3.1-5 */ 
-o-border-image: url(boder-img.png) 30 round; /* Opera 11-12.1 */ 

zu W3Schools Nach der Syntax für border-image ist:

border-image: source slice width outset repeat|initial|inherit; 

mehr über Grenze Bild Erfahren Sie hier: http://www.w3schools.com/cssref/css3_pr_border-image.asp

p.img-border{ 
 
border: 10px solid transparent; 
 
    padding: 15px; 
 
    -webkit-border-image: url(https://www.welovesolo.com/wp-content/uploads/vecteezy/01/1fbahmfyivo.jpg) 30 round; /* Safari 3.1-5 */ 
 
    -o-border-image: url(https://www.welovesolo.com/wp-content/uploads/vecteezy/01/1fbahmfyivo.jpg) 30 round; /* Opera 11-12.1 */ 
 
    border-image: url(https://www.welovesolo.com/wp-content/uploads/vecteezy/01/1fbahmfyivo.jpg) 30 round; 
 
}

<p class="img-border"> Sample paragraph. </p>