Heim >Web-Frontend >HTML-Tutorial >CSS vertieftes Verständnis von Grenzen
CSS vertieftes Verständnis von Grenzen
- 迷茫Original
- 2017-03-25 10:28:471350Durchsuche
Randattribute
1.border-width: unterstützt keinen Prozentsatz, unterstützt Schlüsselwörter, dünn (1 Pixel), mittel (Standardwert, 3 Pixel, der Grund, warum der Standardwert 3 Pixel ist, liegt nur beim Rand ist 3px und höher, border-style ist gültig
Fruit), thick (5px)
2. border-style: hat unterschiedliche Werte, die folgende Analyse ist die Anwendung unterschiedlicher Werte
a.solid: kann Dreiecke und Trapeze realisieren
<!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>
<div class="triangle"></div>我是三角形
<div class="trapezia"></div>我是梯形
</body>
</html>b.dashed: gestrichelte Linie, im Chrome/Firefox-Browser beträgt das Verhältnis von gestrichelter Linie zu durchgezogener Linie 3: 1 (dünn), im IE-Browser beträgt das Verhältnis 2:1 (dicht)
c.dotted: gepunktete Linie, im Chrome/Firefox-Browser ist es ein quadratischer Punkt, im IE-Browser ist es rund Punkt (Sie können Punkte verwenden, um den Effekt abgerundeter Ecken zu erzielen)
d.double: Doppellinie, Berechnungsregel, die Breite der Doppellinie ist immer gleich, das mittlere Intervall +-1, zum Beispiel 3px=1 ( innen) + 1 (mittleres Intervall) + 1 (außen) können Sie das dreitaktige Muster realisieren.
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:
<!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>4. Der Rand kann zum Positionieren des Hintergrundbilds verwendet werden, da das Hintergrundbild beim Positionieren
5. Verwenden Sie Rahmen, um ein Layout mit gleicher Höhe zu erreichen. Der Nachteil besteht darin, dass es keine prozentuale Breite unterstützt (4 und 5 sind ähnlich, beide verwenden Rahmen, um den Abstand von einer bestimmten Seite festzulegen)Das obige ist der detaillierte Inhalt vonCSS vertieftes Verständnis von Grenzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!