Bilder CSS3 Border
Mit dem CSS3 border-image - Eigenschaft können Sie ein Bild auf , als die Grenze verwendet werden , um ein Element.
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
Zahlen , gefolgt von -webkit-, -moz- oder -o- die erste Version an , die mit einem Präfix gearbeitet.
| Eigentum | |||||
|---|---|---|---|---|---|
| border-image | 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
CSS3 border-image Objekt
Die CSS3 border-image - Eigenschaft ermöglicht es Ihnen , ein Bild angeben , die anstelle der normalen Rahmen um ein Element verwendet werden.
Das Anwesen besteht aus drei Teilen:
- Das Bild als Grenze zu verwenden,
- Wo das Bild zu schneiden
- Definieren Sie, ob die mittleren Abschnitte wiederholt werden soll oder gestreckt
Wir werden das folgende Bild verwenden (so genannte "/css/border.png"):
Die border-image Eigenschaft nimmt das Bild und schneidet es in neun Abschnitte, wie ein Tic-Tac-Toe - Board. Sie stellt dann die Ecken an den Ecken, und die mittleren Abschnitte wiederholt werden oder gestreckt, wie Sie angeben.
Hinweis: Für die border-image zu arbeiten, das Element muss auch die border Eigenschaft Set!
Dabei werden die mittleren Abschnitte des Bildes wiederholt, um die Grenze zu schaffen:
Ein Bild als Grenze!
Hier ist der Code:
Beispiel
#borderimg
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 round; /* Opera 11-12.1 */
border-image: url(border.png)
30 round;
}
Versuch es selber " Dabei werden die mittleren Abschnitte des Bildes gestreckt, um die Grenze zu schaffen:
Ein Bild als Grenze!
Hier ist der Code:
Beispiel
#borderimg
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 stretch; /* Opera 11-12.1 */
border-image: url(border.png)
30 stretch;
}
Versuch es selber "  | Tipp: Die border-image Eigenschaft ist eigentlich eine Kurzschrift - Eigenschaft für die border-image-source , border-image-slice , border-image-width , border-image-outset und border-image-repeat |
|---|
CSS3 border-image - Verschiedene Scheibe Werte
Verschiedene Scheibe Werte völlig verändert das Aussehen der Grenze:
Beispiel 1:
border-image: url(border.png) 50 - Runde;
Beispiel 2:
border-image: url(border.png) 20% rund;
Beispiel 3:
border-image: url(border.png) 30% rund;
Hier ist der Code:
Beispiel
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
50 round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
50 round; /* Opera 11-12.1 */
border-image: url(border.png)
50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30% round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30% round; /* Opera 11-12.1 */
border-image: url(border.png)
30% round;
} Versuch es selber " Testen Sie sich mit Übungen!
CSS3 Border Properties
| Eigentum | Beschreibung |
|---|---|
| border-image | Eine zusammenfassende Eigenschaft für alle Einstellung border-image-* Eigenschaften |
| border-image-source | Gibt den Pfad zum Bild als Grenze verwendet werden |
| border-image-slice | Gibt an, wie das Randbild zu schneiden |
| border-image-width | Gibt die Breite des Rahmenbildes |
| border-image-outset | Gibt den Betrag, um den die Grenze Bildbereich jenseits der Grenze Feld erstreckt |
| border-image-repeat | Gibt an, ob die Grenze Bild wiederholt werden soll, abgerundet oder gestreckt |