Heim >Web-Frontend >CSS-Tutorial >Wie verwende ich das Border-Image-Attribut? Ausführliche Erläuterung des Tutorials zu den Border-Image-Eigenschaften
Wie verwende ich das Border-Image-Attribut? Ausführliche Erläuterung des Tutorials zu den Border-Image-Eigenschaften
- 云罗郡主nach vorne
- 2018-10-23 16:06:494051Durchsuche
Der Inhalt dieses Artikels befasst sich mit der Verwendung des Border-Image-Attributs. Ein ausführliches Tutorial zum Border-Image-Attribut hat einen gewissen Referenzwert. Freunde in Not können darauf verweisen.
Im CSS-Einführungs-Tutorial haben wir den Rahmenstil „Border-Style“ gelernt, bei dem der Rahmen nur wenige einfache Formen wie durchgezogene Linien, gepunktete Linien und gepunktete Linien aufweist. Was also, wenn wir dem Rand ein schönes Hintergrundbild hinzufügen möchten?
In CSS3 können wir das Attribut „border-image“ verwenden, um dem Rand ein Hintergrundbild hinzuzufügen.
Erklärung:
Aus der Syntaxanalyse können wir ersehen, dass die Verwendung des border-image-Attributs zum Festlegen des Rahmenhintergrundbilds die Einstellung von 3 Parametern erfordert:
(1) Bildpfad ;
(2) Die Breite des ausgeschnittenen Bildes (die Breite der 4 Seiten, in der Reihenfolge oben, rechts, unten, links, im Uhrzeigersinn, ähnlich der 4-seitigen Reihenfolge des Randes). Attribut);
(3) Bildkachelmethode
Was sollen wir tun, wenn wir das folgende Bild als Hintergrundbild des (90px×90px)-Elementrahmens verwenden möchten? (Jedes kleine Quadrat unten ist 30 x 30 Pixel groß)
Beispiel:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 border-image属性</title>
<style type="text/css">
#div1
{
width:210px;
height:150px;
border:30px solid gray;
border-image:url("../App_images/lesson/run_css3/border_img1.png") 30 repeat;
-webkit-border-image:url("../App_images/lesson/run_css3/border_img1.png") 30 repeat;
-moz-border-image:url("../App_images/lesson/run_css3/border_img1.png") 30 repeat;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
Was Ihnen dieser Artikel bringt, ist die Verwendung des Attributs „border-image“? Detailliertes Tutorial zum Border-Image-Attribut. Wenn Sie mehr über das CSS3-Video-Tutorial erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.
Das obige ist der detaillierte Inhalt vonWie verwende ich das Border-Image-Attribut? Ausführliche Erläuterung des Tutorials zu den Border-Image-Eigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!