CSS3 Ränder(Border)

mit CSS3können Bilder auf den Rahmen des Elements angewendet werden.

mit CSS3Ränder

CSS3bietet zwei neue Attribute, um die Rahmen des Elements auf eine elegantere Weise zu stylen- border-image verwendet, um Bilder zum border-radius-Eigenschaft sowie die Eigenschaften, die ohne Verwendung von Bildern Ecken erstellen, vorstellen.

Das nächste Kapitel wird Ihnen CSS3Diese neuen Rahmenattribute, für andere mit den Rändern verbundenen Attribute, sieheCSS-RänderTutorials.

Erstellen Sie CSS3Ecken

Diese border-radius-Eigenschaft kann verwendet werden, um Ecken zu erstellen. Diese Eigenschaft definiert normalerweise die Form der Ecken der äußeren Grenze. In CSS3Bevor, geschnittene Bilder wurden verwendet, um recht umständliche Ecken zu erstellen.

.box {
　　　　width:　300px;
　　　　height:　150px;
　　　　background: #ffb6c1;
　　　　border:　2px fest #f08080;
　　　　border-radius:　20px;
}

CSS hinzufügen3Randbilder

border-image-Eigenschaft ermöglicht es Ihnen, ein Bild als Rahmen des Elements zu spezifizieren.
Das Design der Ränder ist von border-Die Seiten und Ecken des Bildes, das im URL der Bildquelle angegeben ist, erzeugt. Die Randbilder können in vielfältiger Weise geschnitten, wiederholt, skaliert und gestreckt werden, um die Größe des Randbildbereichs zu passen.

.box {
　　　　width:　300px;
　　　　height:　150px;
　　　　border:　15px fest transparent;
　　　　-webkit-border-image: url("border.png")　30　30 runde;　/*　Safari　3.1-5　*/
　　　　-o-border-image: url("border.png")　30　30 runde;　/*　Opera　11-12.1　*/
　　　　border-image: url("border.png")　30　30 runde;
}