Heim >Web-Frontend >CSS-Tutorial >Eine detaillierte Einführung in das Border-Attribut von CSS
Eine detaillierte Einführung in das Border-Attribut von CSS
- 高洛峰Original
- 2017-03-19 14:30:242378Durchsuche
border's Attribut
1. border-width: unterstützt keinen Prozentsatz, unterstützt Schlüsselwörter, dünn (1 Pixel), mittel (Standardwert, 3 Pixel, The Der Grund, warum der Standardwert 3 Pixel beträgt, liegt darin, dass border-style nur gültig ist, wenn der Rahmen 3 Pixel und höher ist. Stil: hat unterschiedliche Werte. Im Folgenden werden die Anwendungen unterschiedlicher Werte analysiert
a.solid: kann Dreiecke und Trapeze realisieren
b.dashed: gestrichelte Linie, durchsuchen in Chrome/Firefox Im Browser beträgt das Verhältnis von gepunkteten Linien und durchgezogenen Linien 3:1 (dünn), imIE-Browser
beträgt das Verhältnis 2:1 (dicht)<!DOCTYPE html><html><head>
<title>用solid实现三角和梯形</title>
<meta charset="utf-8">
<style type="text/css">
.triangle{
width: 0px;
height: 0px;
border-style:solid;
border-width: 50px;
border-color: red transparent transparent transparent;
}
.trapezia{
width: 40px;
height: 40px;
border-style: solid;
border-width: 50px;
border-color:transparent transparent green transparent ;
margin-top: 10px;
}
</style></head><body><p class="triangle"></p>我是三角形<p class="trapezia"></p>我是梯形</body></html>
c.dotted: Gepunktete Linie ist im Chrome-/Firefox-Browser ein quadratischer Punkt, im IE-Browser ist Es ist ein runder Punkt (Sie können runde Punkte verwenden, um einen abgerundeten Eckeneffekt zu erzielen)
d.double: Doppellinie, Berechnungsregel. Die Breite der Doppellinien ist immer gleich und das mittlere Intervall beträgt +- 1. Zum Beispiel 3px=1 (innen) + 1 (mittleres Intervall) + 1 (außen), wodurch eine Grafik mit drei Balken realisiert werden kann.
e.inset (Einschub), Outset (außen konvex), Ridge (Groove): veralteter Stil, schlechte Kompatibilität, keine Verwendungsszenarien
3.border-color: in Wenn Sie die Farbe angeben, Farbe als Rahmenfarbe verwenden Mit dieser Funktion können Sie den CSS-Stilcode vereinfachen, wenn der Link seine Farbe ändert. Zum Beispiel:
4. Verwenden Sie Ränder, um das Hintergrundbild zu positionieren, da das Hintergrundbild den Rand beim Positionieren nicht berechnet<!DOCTYPE html><html><head>
<title>鼠标移动时边框颜色的改变</title>
<meta charset="utf-8">
<style type="text/css">
.a{
width: 30px;
height: 30px;
padding: 20px;
margin:30px;
color: red;
border:1px solid;
}
.a:hover{
color: blue;/* border:1px solid;*/ }
</style></head><body><p class="a">哈哈</p></body></html>5. Verwenden Sie Ränder, um eine gleiche Höhe zu erreichen Beim Layout besteht der Nachteil darin, dass die prozentuale Breite nicht unterstützt wird
(4 und 5 sind ähnlich, beide verwenden Rahmen, um den Abstand von einer bestimmten Seite festzulegen)
Das obige ist der detaillierte Inhalt vonEine detaillierte Einführung in das Border-Attribut von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!