Heim >Web-Frontend >CSS-Tutorial >So verwenden Sie die CSS-Eigenschaft „Border-Right-Style'.
So verwenden Sie die CSS-Eigenschaft „Border-Right-Style'.
- silencementOriginal
- 2019-05-27 14:18:562861Durchsuche
Border-Right-Style-Definition und Verwendung
In CSS wird das Border-Right-Style-Attribut verwendet, um den Stil des festzulegen rechter Rand. Wenn wir den Stil des rechten Randes des Elements individuell festlegen möchten, können wir dieses Attribut verwenden.
Border-Right-Style-Attributsyntaxformat
CSS-Syntax: Border-Right-Style: keine / versteckt / gepunktet / gestrichelt / durchgezogen / doppelt / Rille / Grat / inset / outset / inherit;
border-right-style Attributwertbeschreibung
none: Randlose Elemente festlegen (Standard);
versteckt: Dasselbe wie der Attributwert „none“ (aber bei Verwendung in Tabellenelementen wird „hidden“ verwendet, um Rahmenkonflikte aufzulösen); Linie);
gestrichelt: Stellen Sie den Rand auf eine gepunktete Linie ein (die meisten Browser unterstützen dies nicht und zeigen ihn als durchgezogene Linie an);
double: Legen Sie den Rand auf eine doppelte Linie fest (die Breite entspricht dem Wert des Attributs „border-width“).
groove: Legen Sie den Rand auf eine 3D-Rille fest (der Effekt hängt davon ab). vom Wert des border-color-Attributs);
ridge: Setzt den Rand auf einen 3D-Ridge-Rand (der Effekt hängt vom Wert des border-color-Attributs ab); Stellen Sie den Rand auf einen 3D-Einsatz ein (der Effekt hängt vom Wert des Attributs „Border-Color“ ab) ); );
inherit: Erbt den Rahmenstil vom übergeordneten Element.
Instanz<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css border-right-style右边框样式属性笔记</title>
<style type="text/css">
body{background: #ddd;font-size:20px;}
#a,#b,#c,#d{margin-top:10px;width:400px;}
#a{border-right-style:solid;}
#b{border-right-style:dashed;}
#c{border-right-style:double;}
</style>
</head>
<body>
<div id = "a">solid：右边框为实线。</div>
<div id = "b">dashed：右边框为虚线（大多数浏览器不支持，显示为实线）</div>
<div id = "c">double：右边框为双线（宽度等于border-width属性的值）</div>
</body>
</html>Laufendes Ergebnis
Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CSS-Eigenschaft „Border-Right-Style'.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!