css border-bottom (Legen Sie den Stil, die Breite und die Farbe des unteren Rands fest)

WBOY

Freigeben： 2016-09-21 13:56:03

Original

3650 Leute haben es durchsucht

border-bottom (geben Sie den Stil, die Breite und die Farbe des unteren Randes an)

border-bottom: value;

border-bottom-style:value;

border-bottom-color: value;

border-bottom-width:value;

Zum Beispiel:

border-bottom: solid 1px #ffff00;

border-bottom-style: offset;

Rahmenfarbe unten: #0000ff;

border-bottom-width:15px;

Das Attribut „border-bottom“ wird verwendet, um den Stil, die Breite und die Farbe des unteren Randes anzugeben. Die Werte werden durch Leerzeichen halber Breite getrennt und es gibt keine Reihenfolge.

Informationen zum Wert des Stils des Attributs „Rand unten“ finden Sie im Stil des Rands. Der Wert der Kantenbreite entnehmen Sie bitte der Kantenbreite.

Verwenden Sie die folgenden Attribute, wenn Sie den Stil, die Breite und die Farbe der Endzeile angeben:

border-bottom-color: Die Farbe des unteren Randes
border-bottom-style: Der Stil der Endzeile
border-bottom-width: Die Breite des unteren Randes

Der Wert von border-bottom und seine Beschreibung

Attribut

Wert

Beschreibung

border-bottom

solid

Die untere Kante ist eine durchgezogene Linie
Andere Werte umfassen: Rille, gepunktet usw. Einzelheiten finden Sie im Kantenstil.

1px

border-bottom的值及其说明
属性	值	说明
border-bottom	solid	下边线为实线其他的值还有：groove、dotted等，详细请参照边线样式。
	1px	下边线的宽度使用数值可以表示边线的任意宽度，数值单位除了px，还有em、ex，详细请参照数值单位使用关键词指定 thin(细)、medium(普通)、thick(粗)
	#ff0000	下边线的颜色除了使用颜色代码表示具体颜色之外，边线还可以指定为透明即：transparent

Die Breite der unteren Kante
Verwenden Sie numerische Werte, um eine beliebige Breite der Kante darzustellen. Zu den numerischen Einheiten gehören neben px auch em und ex Numerische Einheiten
Verwenden Sie Schlüsselwörter, umdünn (fein), mittel (normal), dick (grob) anzugeben

#ff0000

Die Farbe der unteren Kante
Neben der Verwendung von Farbcodes zur Angabe bestimmter Farben kann die Kante auch als transparent angegeben werden: transparent

.sample1,.sample2,.sample3{

margin:0.5em;

padding:2px;

}

.sample1 {border-bottom: solid 1px #ffff00;}

.sample2 {border-bottom: groove 10px #00ff00;}

.sample3 {border-bottom-style: ridge;

border-bottom-color: #0000ff;

border-bottom-width:15px;

}

Nach dem Login kopieren

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1">

<link href="material/border-bottom.css" rel="stylesheet" type="text/css" />

<title>border-bottom属性（http://wwww.manongjc.com）</title>

</head>

<body>

<div class="sample1">sample1：下边线 solid 1px #ffff00</div>

<div class="sample2">sample2：下边线 groove 10px #00ff00</div>

<div class="sample3">sample3：分别指定下边线的样式、宽度、颜色 </div>

</body>

</html>

Nach dem Login kopieren

Referenzlektüre: http://www.manongjc.com/article/1190.html