CSS3 Border
CSS3 Border
Mit CSS3, können Sie abgerundete Ecken erstellen, einen Schatten Box hinzufügen, und als das Bild von der Grenze ohne Design-Programmen wie Photoshop.
In diesem Kapitel finden Sie die folgenden Rahmeneigenschaften erfahren:
- border-radius
- box-shadow
- border-image
CSS3 abgerundete Ecken
In Filets heikel in CSS2. Wir hatten ein anderes Bild an jeder Ecke zu verwenden.
In CSS3, ist es sehr leicht abgerundeten Ecken zu erstellen.
Im CSS3 wird border-radius Eigenschaft verwendet abgerundeten Ecken zu erstellen:
CSS3 Box Schatten
Die CSS3 box-shadow Eigenschaft wird verwendet, um einen Schatten hinzuzufügen:
Beispiele
In box-shadow-Eigenschaft in der div
{
box-shadow: 10px 10px 5px #888888;
}
Versuchen »
CSS3 border Bilder
Mit dem CSS3 border-image-Eigenschaft können Sie ein Bild verwenden, um einen Rahmen zu erstellen:
Verwenden Sie Bilder div Rahmen zu erstellen:
Beispiele
Verwenden Sie Bilder, um eine Grenze div erstellen
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
Versuchen »
New Border Properties
| Immobilien | Erklärung | CSS |
|---|---|---|
| border-image | Einstellen der Grenze Stenografie Eigenschaften aller Bilder. | 3 |
| border-radius | Einer für alle vier Grenzeinstellung - * - Radius Kurzschrift-Eigenschaft | 3 |
| box-shadow | Bringen Sie einen oder mehrere Dropdown-Feld Schatten | 3 |