Home >Web Front-end >Front-end Q&A >What does css3 double border mean?
What does css3 double border mean?
- WBOYOriginal
- 2022-04-22 16:42:283372browse
In CSS3, double-line border means that the element border is composed of two single lines, and the interval between them is equal to the specified border width value; the "border-style" attribute can be used to set the element's border to double line, just set the attribute value to double, and the syntax is "{border-style:double;}".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
What does css3 double-line border mean
Double-line border means that the element border is composed of two single lines, and the interval between them is equal to the specified border width value
The border-style property sets the style of an element's four borders. This property can have one to four values.
The attribute value is double to define double lines. The width of the double line is equal to the value of border-width.
Other attribute values are as follows:
Examples are as follows:
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
<p class="mix">混合边框</p>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of What does css3 double border mean?. For more information, please follow other related articles on the PHP Chinese website!