Einführung in die Verwendung der CSS-Border-Eigenschaft solide (durchgezogene Linie)-CSS-Tutorial-php.cn

Einführung in die Verwendung der CSS-Border-Eigenschaft solide (durchgezogene Linie)

巴扎黑

Freigeben： 2017-06-28 13:57:33

Original

7099 Leute haben es durchsucht

Rand (Zeichnungsrahmen) ist eine Eigenschaft von CSS. Sie können damit Rahmen für HTML-Tags zeichnen, die den Bereich bestimmen (z. B. TD, p usw.), Rahmen zum Text hinzufügen und Trennzeichen zur Navigation hinzufügen Lassen Sie uns ein Beispiel mit Ihnen teilen. Interessierte können mehr darüber erfahren. Jeder, der eine Webseite erstellt hat, macht sich zunächst Gedanken über das Zeichnen von Linien. Es ist ein Attribut von CSS. Sie können es verwenden, um den Bereich von HTML-Tags anzugeben (z. B. TD, S usw.) usw.) Zeichnen Sie einen Rahmen, der den Typ, die Breite und die Farbe der Randlinie festlegen kann. Mit dieser Funktion können Sie einige Spezialeffekte erzeugen. Im Folgenden werden die Anwendungskompetenzen anhand von Beispielen veranschaulicht.

1. Fügen Sie dem Text einen Rahmen hinzu

Im obigen Beispiel werden einem Textstück verschiedene Ränder hinzugefügt, nur um die Farbe und Dicke zu veranschaulichen der Grenzlinie ist variabel.
Der CSS-Code des ersten Rahmens lautet: style="max-width:90%"
Die Bedeutung der drei Parameter nach „border“ ist: Die Breite der Randlinie ist: dünn (dünne Linie) ; Randlinientyp: durchgezogen (durchgezogene Linie); Randlinienfarbe: rot (rot).
Die Breite der Randlinie hat drei Standardwerte: dünn (dünne Linie), mittel (mitteldicke Linie) und dick (dicke Linie).
Darüber hinaus kann die Breite auch angepasst werden, z. B.: 1pt , 5px, 2cm usw. .

Der Typ der Grenzlinie hat neun eindeutige Werte: keine (keine Grenzlinie), gepunktet (gestrichelte Linie aus Punkten), gestrichelt (gestrichelte Linie aus kurzen Linien), durchgezogen (durchgezogene Linie), doppelt ( doppelte) Linie, die Breite der Doppellinie plus die Breite des leeren Teils dazwischen entspricht der Breite, die durch Rahmenbreite), Rille (3D-Rillenformrand), Grat (3D-Ridge) definiert ist -förmiger Rand), Inset (3D-Inline-Rand, dunklere Farbe), Outset (3D-Inline-Rand, hellere Farbe),
Hinweis: Wenn das System die Attributwerte dieser Ränder nicht unterstützt, dann „gepunktet“. „, „gestrichelt“, „doppelt“, „Groove“, „Ridge“, „Einsatz“ und „Anfang“ werden alle durch „durchgezogen“ ersetzt.
Farbe der Randlinie: Sie können hexadezimale Farbcodes verwenden, z. B. #00ffcc.

Wie Sie oben sehen können, ist das Hinzufügen von Rändern zu Text tatsächlich sehr einfach. Sie werden die Einstellungen der folgenden Ränder im obigen Beispiel verstehen, ohne sie überhaupt zu erklären! Hier ist ein kleiner Trick für Sie: Um einem Textabschnitt einen Rahmen hinzuzufügen, können Sie CSS zum

-Tag hinzufügen. Um einen Rahmen zu mehreren Textabschnitten hinzuzufügen, schließen Sie diese Textabschnitte zunächst mit p-Tags ein Fügen Sie dann CSS zum

-Tag hinzu. Wenn Sie einer Textzeile mehrere verschiedene Ränder hinzufügen möchten, müssen Sie den Text in die -Tabelle einfügen und dann CSS hinzufügen

-Tag bzw.

2. Trennlinien zum Navigationsmenü hinzufügen

Natürlich kann die kleine weiße Linie im obigen Beispiel mit einem Bild erstellt werden, aber hier bin ich Ich verwende das erweiterte CSS-Attribut „border“, um eine Seite des Rahmens zu zeichnen, was viel weniger Code erfordert. Die einzelne Seite der Grenze ähnelt den vier Seiten der Grenze im obigen Beispiel. Die Attribute der vier Seiten einer Grenze sind wie folgt:
Name der Grenzlinie: border-top (obere Grenzlinie), Grenze -right (rechte Randlinie), border -bottom (untere Randlinie) und border-left (linke Randlinie); Typ, Breite und Farbe jeder Randlinie sind die gleichen wie beim Attribut „boder“. In diesem Beispiel möchten Sie beispielsweise die linke Randlinie jeder Zelle als weiße Linie und die Breite der Linie als durchgezogene Linie von „1px“ definieren. Der CSS-Code lautet wie folgt: style="max-width:90%".
Wenn bei der separaten Definition der Grenzlinie ein bestimmter Wert nicht angegeben wird, wird der Standardanfangswert verwendet. Es ist sehr praktisch, CSS in Dreamweaver zu definieren, ohne Code zu schreiben; es ist sehr praktisch, häufig verwendete Grenzlinien einmal zu definieren und sie in eine externe CSS-Datei einzufügen. Sie können sie einfach aufrufen, wenn Sie sie benötigen.
3. Verwenden Sie Rahmenlinien unterschiedlicher Breite und Farbe in einem Rahmen.
Der Effekt in diesem Beispiel kann natürlich mit der Methode im obigen Beispiel erzielt werden, aber das wäre zu viel Code, also eine andere Methode zum Zusammenführen Mit dieser Methode können Sie die Attributwerte der vier Kanten zusammen klassifizieren. Der Code in diesem Beispiel lautet beispielsweise wie folgt:
style="border-style:solid; border -width: dünn dünn dick dick; Rahmenfarbe:#00ff00 #00ff00 #0000ff #0000ff".

Wie Sie oben sehen können, habe ich die Art, Breite und Farbe der Randlinien gemeinsam definiert. Bitte achten Sie hier auf einige Punkte:
Die Positionsreihenfolge des ersten und vierten Randes Linien sind: obere Randlinie, rechte Randlinie, untere Randlinie, linke Randlinie; In diesem Beispiel habe ich nur einen durchgezogenen Linientyp als Randlinientyp ausgewählt. Tatsächlich können die vier Seiten auch so sein definiert mit verschiedenen Typen;3. Attributwerte können als eins, zwei, drei oder vier definiert werden. Wenn nur ein Attributwert definiert ist, nehmen die anderen drei automatisch den gleichen Wert an. Beispiel: border-style:solid und border-style:solid solid solid haben genau die gleiche Wirkung, wenn nur zwei oder drei Werte vorhanden sind gegeben, dann fehlt Der Attributwert der Kante nimmt den gleichen Wert an wie der gegenüberliegende Rand. Zum Beispiel: border-width:thin thick hat den gleichen Effekt wie border-width:thin thick Thin thick, border-width:1px 2px 3px hat den gleichen Effekt wie border-width:1px 2px 3px 2px.

Die flexible Anwendung des Border-Attributs kann viele Spezialeffekte erzeugen, und die Methode ist die gleiche wie oben beschrieben.
Beispiel:

Der Code lautet wie folgt:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>一列固定宽度——</title> 
<style type="text/css"> 
<!-- 
#layout { 
border: 2px solid #A9C9E2; 
background-color
: #E8F5FE; 
height: 200px; 
width: 300px; 
} 
--> 
</style> 
</head> 
<body> 
<p id="layout">hfhfg</p> 
</body> 
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung der CSS-Border-Eigenschaft solide (durchgezogene Linie). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!