Beispiel-Tutorial für einen CSS3-Rahmen

CSS3-Ränder

Mit CSS3 können Sie abgerundete Ränder erstellen, Schattenboxen und Bilder als Ränder hinzufügen, ohne Designprogramme wie Photoshop zu verwenden.

In diesem Kapitel erfahren Sie mehr über die folgenden Rahmeneigenschaften:

border-radius

box-shadow

border-image

Browser-Unterstützung

Eigenschaft

Browser-Unterstützung

Internet Explorer 9+ unterstützt Border-Radius und Box-Shadow.

Firefox, Chr Einige und Safari unterstützen alle aktuellen Randattribute.

Hinweis: Safari mit dem Präfix -webkit- unterstützt Schattenränder.

Opera mit dem Präfix -o- unterstützt Randbilder.

Abgerundete CSS3-Ecken

Das Hinzufügen abgerundeter Ecken in CSS2 ist schwierig. Wir mussten in jeder Ecke unterschiedliche Bilder verwenden.

In CSS3 ist es einfach, abgerundete Ecken zu erstellen.

In CSS3 wird die Eigenschaft border-radius verwendet, um abgerundete Ecken zu erstellen:

Dies ist ein abgerundeter Rand!

Beispiel

Abgerundete Elemente in div hinzufügen:

div
{
border:2px solid;
border-radius:25px;
}

CSS3-Boxschatten

Die Box-Shadow-Eigenschaft in CSS3 wird verwendet, um Schatten hinzuzufügen:

Instanz

Box-Shadow-Attribut in div hinzufügen

div
{
box-shadow: 10px 10px 5px #888888;
}

CSS3-RahmenBild

Mit CSS3 Mit dem Rand- Mit dem Attribut „image“ können Sie einen Rahmen mithilfe eines Bilds erstellen:

Mit dem Attribut „border-image“ können Sie ein Bild als Rahmen angeben! Originalbild, das zum Erstellen des Rahmens oben verwendet wurde:

Erstellen Sie einen Rahmen mit einem Bild in einem Div:

Beispiel

Erstellen Sie einen Rahmen mit einem Bild in einem Div

div
{
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 */
}

【Verwandte Empfehlungen】

1. Besondere Empfehlung: Version V0.1 von „php Programmer Toolbox“ herunterladen

2. Kostenloses CSS-Online-Video-Tutorial

3. php.cn Dugu Jiujian (2) - CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial für einen CSS3-Rahmen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!