Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Einführung in den Beispielcode von border-image im CSS-Stil

Detaillierte Einführung in den Beispielcode von border-image im CSS-Stil

黄舟
黄舟Original
2017-06-01 10:39:261792Durchsuche

border-image-source propertyLegen Sie den Pfad des Bildes fest [keine b27ed142502ea4cc7ec1d5c724acf419]

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


Border-Image-Slice-Attribut Bildrand nach innen versetzt [ c51b9a917ce0dc2f34401eb02ebf2ddf|e581fa8796e2fe03b723f816d9f44990 | set Das Attribut legt die Größe des Randbildbereichs über den Rand hinaus [ d82af2074b26fcfe177e947839b5d381|

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



-->

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in den Beispielcode von border-image im CSS-Stil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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