Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

php中世界最好的语言
Freigeben: 2018-03-22 11:29:48
Original
2557 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!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage