Eine detaillierte Einführung in das Border-Attribut von CSS-CSS-Tutorial-php.cn

Eine detaillierte Einführung in das Border-Attribut von CSS

高洛峰

Freigeben： 2017-03-19 14:30:24

Original

2380 Leute haben es durchsucht

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), im

IE-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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!