CSS3-Eigenschaft „tutorial-border-image'.

Heute erklärt Ihnen Schwester Cui Er das CSS3-Tutorial – das letzte Attribut des Rahmens: das Attribut border-image. Dieser Artikel stellt hauptsächlich die Definition und Verwendung dieses Attributs vor und hofft, Studenten zu helfen, die Hilfe bei der Front-End-Entwicklungsarbeit benötigen.

Sehen Sie sich ein konkretes Beispiel an:

Geben Sie das Bild als Rahmen um das div-Element an:

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

Browserunterstützung:

Internet Explorer 11, Firefox, Opera 15, Chrome und Safari 6 unterstützen das Border-Image-Attribut.

Safari 5 unterstützt ein alternatives -webkit-border-image-Attribut.

Definition und Verwendung:

border-image attribute ist ein Kurzattribut, das zum Festlegen der folgenden Attribute verwendet wird:

border-image-source;

border -image-slice;

border-image-width;

border-image-outset;

border-image-repeat;

wenn der Wert weggelassen wird , wird der Standardwert festgelegt.

Tipp: Verwenden Sie border-image-*-Eigenschaften, um schöne skalierbare Schaltflächen zu erstellen!

Mögliche Werte:

Das Obige ist der Inhalt des CSS3-Attributs „tutorial-border-image“, weitere verwandte Inhalte Bitte beachten Sie die chinesische PHP-Website (www.php.cn)!