Detaillierte Erläuterung der Verwendung von Border-Image im CSS-Stil-CSS-Tutorial-php.cn

Detaillierte Erläuterung der Verwendung von Border-Image im CSS-Stil

php中世界最好的语言

Freigeben： 2018-03-22 11:29:48

Original

2588 Leute haben es durchsucht

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);
}

Nach dem Login kopieren

Border-Image-Slice-Attribut Bildrand nach innen versetzt [

border-image-

p {
   border: 20px solid #000;
   border-image-source: url(border.png);
   border-image-slice: 27,27,27,27;
}

Nach dem Login kopieren

width

legt die Breite des Bildrandes fest [|

border-image-outset-Attribut legt die Größe des Randbildbereichs jenseits des Randes 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;
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

Empfohlene Lektüre:

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!