logo

Bootstrap 4 alpha

Mega Menue Sidebar

css3area


CSS 3 Border Image (stretch)

Eine Bordergrafik kann in Höhe und Breite im Bezug zum betreffenden Layer gestreckt oder wiederholt werden. Es funktioniert am besten mittels solid / gradient (teil-)transparenten Grafiken.

Folgendes kleine Beispiel zeigt eine Bordergrafik die gestreckt und wiederholt wird für eine Box mit fester Breite und Höhe.

Eine Box die mittels folgender Grafik erstellt wurde.

css3 border grafik


#my_CSS3_id {
border-width:15px;
-moz-border-image:url(borderimage.png) 30 30 stretch;
-webkit-border-image:url(borderimage.png) 30 30 stretch;
width:300px;
padding:15px 25px;
height:inherit;
}

 

CSS 3 Border Image (round)

Mittels border-image ’round’, wird das Bild wiederholt, skaliert/abgerundet im Bezug zur Höhe,Breite und Border-Breite des betreffenden Bereichs.

Diese Box wurde mittels folgender Grafik und CSS3 Code erstellt.

css3 border image used


#my_CSS3_id {
border-width:15px;
-moz-border-image:url(borderimage2.png) 30 30 round;
-webkit-border-image:url(borderimage2.png) 30 30  round;
width:300px;
padding:15px 25px;
height:inherit;
}

 

CSS 3 = Cascading Style Sheets Level 3, eine deklarative Stylesheet-Sprache für strukturierte Dokumente