Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Verwendung von border-image im CSS-Stil geben. Was sind die Vorsichtsmaßnahmen für die Verwendung von border-image im CSS-Stil? Hier sind praktische Fälle, werfen wir einen Blick darauf.
border-image-source AttributeLegen Sie den Pfad des Bildes [none |
p { border: 20px solid #000; border-image-source: url(border.png); }
Border-Image-Slice-Attribut Bildrand nach innen versetzt [
p { border: 20px solid #000; border-image-source: url(border.png); border-image-slice: 27,27,27,27; }
legt die Breite des Bildrandes fest [
p { border: 20px solid #000; border-image-source: url(border.png); border-image-slice: 27,27,27,27; border-image-width: 27px 1 10% 27px; }
border-image-repeat-Attribut legt fest, ob der Bildrand wiederholt, abgerundet oder gestreckt werden soll (1,2)
p { border: 20px solid #000; border-image-source: url(border.png); border-image-slice: 27,27,27,27; border-image-width: 27px 1 10% 27px; border-image-outset: 27px 27px 27px 27px; }
Ich glaube, Sie haben diesen Artikel gelesen. Sie haben das gemeistert Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
p { border: 20px solid #000; border-image-source: url(border.png); border-image-slice: 27,27,27,27; border-image-width: 27px 1 10% 27px; border-image-outset: 27px 27px 27px 27px; border-image-repeat: rounded; border-image: url(border.png) 27 rounded; }
3D-Flip-Effekt von Baidu Tieba
CSS3, um einen animierten Fahrradeffekt zu erzielen
Zwei Methoden zum Implementieren des Fortschrittsbalkens in CSS3
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von Border-Image im CSS-Stil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!