Home > Article > Web Front-end > What is the attribute of double stroke at the bottom of css

What is the attribute of double stroke at the bottom of css

青灯夜游Original: 2022-05-18 18:14:541981browse

css double stroke at the bottom is the "border-bottom-style" attribute. This attribute is used to set the style of the bottom border of the element. When the attribute value is set to "double", you can add a double solid to the bottom of the element. Line border, that is, double stroke effect; syntax "border-bottom-style:double".

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css double stroke at the bottom is the "border-bottom-style" attribute.

The border-bottom-style attribute is used to set the style of the bottom border of the element.

When the value of this attribute is set to "double", a double solid line can be added to the bottom of the element. Border, that is, to achieve a double stroke effect.

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			p.double {
				border-bottom-style: double;
			}
		</style>
	</head>
	<body>
		<p>无边界。</p>
		<p class="double">双线底边界。</p>
	</body>
</html>

What is the attribute of double stroke at the bottom of css

Explanation:

In addition to double, the value of the border-bottom-style attribute also There are:

##noneSpecify no borderhidden Same as "none". Except when applied to tables, for which hidden is used to resolve border conflicts. dottedSpecify dotted borderdashedSpecify dotted bordersolidSpecify a solid bordergrooveDefine a double line. The width of the double line is equal to the value of border-widthridgedefines a three-dimensional diamond border. The effect depends on the value of border-colorinsetdefines a three-dimensional concave border. The effect depends on the value of border-color outset Defines a three-dimensional convex border. The effect depends on the value of border-color

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			p.dotted {
				border-bottom-style: dotted;
			}

			p.dashed {
				border-bottom-style: dashed;
			}

			p.solid {
				border-bottom-style: solid;
			}

			p.groove {
				border-bottom-style: groove;
			}

			p.ridge {
				border-bottom-style: ridge;
			}

			p.inset {
				border-bottom-style: inset;
			}

			p.outset {
				border-bottom-style: outset;
			}
		</style>
	</head>

	<body>
		<p class="dotted">点底边界。</p>
		<p class="dashed">虚线底边界。</p>
		<p class="solid">实线底边界。</p>
		<p class="groove">凹槽底边界。</p>
		<p class="ridge">垄状底边界。</p>
		<p class="inset">嵌入底边界。</p>
		<p class="outset">外凸底边界。</p>
	</body>
</html>

Value	Description

What is the attribute of double stroke at the bottom of css

(Learning video sharing:

css video tutorial, webfrontend)

The above is the detailed content of What is the attribute of double stroke at the bottom of css. For more information, please follow other related articles on the PHP Chinese website!

html5 css css3 double border

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What are the properties used for hiding in CSSNext article：What are the properties used for hiding in CSS

See more

What is the attribute of double stroke at the bottom of css

Related articles