Sie können CSS3 zu ziehen Grenzen um jede HTML5-Element verwenden. Sie haben eine gewisse Freiheit in der Grenzgröße, Art und Farbe. Hier sind zwei Möglichkeiten, Grenz Eigenschaften zu definieren: mit individuellen Grenz Attribute und unter Verwendung einer Verknüpfung. Grenzen ändern sich nicht wirklich um das Layout, aber sie visuelle Trennung fügen, die ansprechend sein kann, vor allem, wenn Ihre Layouts komplexer sind.

Wie die Grenz Attribute zu verwenden,

Hier ist eine Seite mit einem einfachen Rahmen um die Überschrift gezogen.

Der Code für die borderProps.html Seite zeigt die grundlegenden Prinzipien der Grenzen in CSS:

Dies hat eine Grenze

Jedes Element kann eine Grenze definiert. Borders benötigen drei Attribute:

• Breite: Die Breite der Grenze. Dies kann in jeder CSS-Einheit gemessen werden, aber Randbreite wird normalerweise in Pixel oder ems beschrieben. (Merken: Ein em ist in etwa die Breite des Großbuchstabens # 147-M # 148- in der aktuellen Schrift.)

• Farbe: Die Farbe, die Grenze angezeigt werden soll. Die Farbe kann wie jede andere Farbe in CSS definiert werden, mit Farbnamen oder Hex-Werte.

• Stil: CSS unterstützt eine Reihe von Rahmenarten. Das Beispiel zeigt eine doppelte Grenze. Dies zieht eine Grenze mit zwei dünneren Linien rund um das Element.

Sie müssen alle drei Attribute definieren, wenn Sie Grenzen richtig angezeigt werden soll. Sie können nicht auf die Standardwerte setzen alle Browser zu arbeiten.

Wie Stile Grenze zu definieren,

CSS hat eine vorgegebene Liste der Grenz Stile, die Sie wählen können. Hier ist eine Seite mit allen primären Rahmenarten angezeigt.

Sie können für jede Grenze jeder dieser Arten wählen:

• Solide: Eine einzige durchgezogene Linie um das Element.

• Doppelt: Zwei Linien um das Element mit einem Spalt zwischen ihnen. Die Rahmenbreite ist die kombinierte Breite der beiden Linien und die Lücke.

• Rille: Verwendet Beschattung eine Nut zu simulieren, in der Seite geätzt.

• Grat: Verwendet Beschattung einen Grat zu simulieren, auf der Seite gezogen.

• Einsatz: Verwendet Schattierung eine gepresste-in-Taste zu simulieren.

• Anfang: Verwendet Schattierung eine Schaltfläche zu simulieren ragte von der Seite.

• Eine gestrichelte: Eine gestrichelte Linie um das Element.

• Gepunktete: Eine gepunktete Linie um das Element.

Wie die Grenze Verknüpfung verwenden

drei verschiedene CSS-Attribute definieren für jede Grenze ist ein bisschen langweilig. Glücklicherweise enthält CSS eine praktische Grenze Verknüpfung, die Grenzen zu definieren, viel einfacher macht.

Sie können nicht den Unterschied von dem Ausgang sagen, aber der Code für borderShortcut.html ist denkbar einfach:

Diese Seite nutzt die Grenze Abkürzung

Die Reihenfolge, in der Grenz Attribute beschreiben spielt keine Rolle. Geben Sie einfach eine Farbe, eine Größe und eine Grenze Stil.

Wie teilweise Grenzen zu schaffen

Wenn Sie möchten, können Sie eine genauere Steuerung von jeder Seite einer Grenze haben. Es gibt eine Reihe von spezialisierten Grenzbefehle für jede der Untergrenzen.

Diese Seite bezieht sich auf den Boden der Überschrift sowie unterschiedliche Grenzen über einen Randstil, unterhalb und an den Seiten der Absätze. Teilgrenzen sind recht einfach zu bauen, wie Sie aus der Codeliste sehen können:

Diese Überschrift hat eine untere Grenze
Die Absätze haben mehrere Grenzen definiert.
Die Absätze haben mehrere Grenzen definiert.

Beachten Sie die Grenze Stile: border-top, border-bottom, border-left, und border-right. Jeder dieser Stile wirkt wie die Grenze Abkürzung, aber es wirkt nur auf einer Seite der Grenze.

Es gibt auch bestimmte Grenze Attribute für jede Seite (bottom-border-width passt die Breite der unteren Grenze, zum Beispiel), aber sie sind fast nie benutzt, weil die Abkürzung Version so viel einfacher ist.