Grenzboden (CSS-Eigentum)

CSS border-bottom Detaillierte Erläuterung der Attribute

border-bottom Eigenschaften sind Kurzeigenschaften in CSS, die zur gleichzeitigen Zeit verwendet werden, um die Breite, den Stil und die Farbe des unteren Randes eines Elements zu setzen. Der Rand befindet sich über dem Elementhintergrund.

Grammatik:

<code class="language-css">border-bottom: [ <border-width> ] [ <border-style> ] [ <border-color> ] | inherit;</border-color></border-style></border-width></code>

Anweisungen:

Mit dieser Eigenschaft können Sie drei Eigenschaften des unteren Randes gleichzeitig festlegen: border-bottom-width, border-bottom-style und border-bottom-color. Sie können nur eine oder mehrere der Eigenschaften angeben, und nicht spezifizierte Eigenschaften verwenden die Standardwerte. Es ist zu beachten, dass der Standardwert border-style und keine Grenzen angezeigt werden, wenn none weggelassen wird. Daher ist es Best Practice, bei der Verwendung von Abkürzung immer Grenzstile anzugeben.

Attributwert:

• <border-width></border-width>: Grenzbreite können Sie Pixel (PX), EM, REM, Prozentsatz (%) und andere Einheiten verwenden. Der negative Wert ist ungültig.
• <border-style></border-style>: Grenzstile wie none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset,
,
• , , 🎜> und <border-color></border-color>.

: Grenzfarbe können Sie hexadezimale Farbwerte, RGB, RGBA, HSL, HSLA oder vordefinierte Farbnamen verwenden.

Beispiel:

<code class="language-css">#example p {
  border-bottom: 2px solid blue;
}</code>

Der folgende Code setzt einen 2-Pixel-weiten blauen, durchgezogenen Linien unteren Rand für Absätze in einem Element mit iD "Beispiel":

FAQ:

• Wie kann man die Farbe des unteren Randes ändern? Verwenden Sie das Attribut border-bottom-color wie border-bottom-color: red;.
• Wie verwendet ich verschiedene untere Grenzstile? Verwenden Sie das Attribut border-bottom-style wie border-bottom-style: dotted;.
• Wie kann ich die untere Randbreite setzen? Verwenden Sie das Attribut border-bottom-width wie border-bottom-width: 2px;.
• Wie setzen Sie die unteren Randeigenschaften mit Abkürzung ein? Verwenden Sie das Attribut border-bottom wie border-bottom: 2px dashed green;.
• Wie entfernt ich den unteren Rand? setzen Sie border-bottom-style auf none, z. B. border-bottom-style: none; oder border-bottom: none;.
• Wie kann ich verschiedene Grenzen für verschiedene Kanten eines Elements festlegen? Verwenden Sie die Eigenschaften border-top, border-right, border-bottom und border-left, um die oberen, rechten, unten- und linken Borders einzustellen.
• Wie erstelle ich einen unteren Rand mit einer Gradientenfarbe? CSS selbst unterstützt keine Gradientengrenzen und muss mithilfe von Pseudoelementen und linearen Gradienten implementiert werden.
• Wie kann man die unteren Grenzeigenschaften animieren? Verwenden Sie die Eigenschaften @keyframes und animation, um die Eigenschaften wie border-bottom-color, border-bottom-width und border-bottom-style zu animieren.
• Wie erstelle ich einen doppelten unteren Rand? setze border-bottom-style auf double, z. B. border-bottom-style: double;.
• Wie erstellt ich Trenner mit unteren Grenzen? Durch Einstellen der Breite und Farbe von border-bottom können Sie Teiler erstellen, die verschiedene Bereiche einer Webseite trennen.

Verwenden Sie zunächst die border-bottom Eigenschaften und ihre zugehörigen Eigenschaften flexibel.

Das obige ist der detaillierte Inhalt vonGrenzboden (CSS-Eigentum). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!