Heim >Web-Frontend >CSS-Tutorial >Randbild im CSS-Stil

Randbild im CSS-Stil

高洛峰
高洛峰Original
2017-02-28 13:49:511365Durchsuche

border-image-source-Attribut legt den Pfad des Randbildes fest [none | dc0870658837139040642baa5555a380]

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

Border-Image-Slice-Attribut Bildrand nach innen versetzt [ 0101162e961d590172bb662ce59684bb|d80b5def5ed1be6e26d91c2709f14170 |42c97a047d75abc12b9b351eb8562711 | >

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-Eigenschaft legt die Größe des Randbildbereichs jenseits des Randes fest [ d82af2074b26fcfe177e947839b5d381|347288b7300655d030e7cfaf93b75a7e ]( 1,4)

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-Attribut legt fest, ob der Bildrand gekachelt werden soll ( wiederholt) oder gefüllt (abgerundet) oder gestreckt (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;
   border-image-repeat: rounded;
   border-image: url(border.png) 27  rounded;
}

border-image in mehr CSS-Stilen Für Verwandte Artikel, achten Sie bitte auf die chinesische PHP-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