027_CSS边框

最新推荐文章于 2025-03-29 14:45:44 发布

自由与束缚JavaJavaScript

最新推荐文章于 2025-03-29 14:45:44 发布

阅读量237

点赞数

分类专栏： css学习文章标签： css web前端

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/109084613

版权

css学习专栏收录该内容

52 篇文章

订阅专栏

1. 元素的边框(border)是围绕元素内容和内边距的一条或多条线。

2. CSS border属性允许你规定元素边框的样式、宽度和颜色。

3. CSS边框属性

4. 边框与背景

4.1. CSS规范指出, 边框绘制在"元素的背景之上"。这很重要, 因为有些边框是"间断的"(例如, 点线边框或虚线框), 元素的背景应当出现在边框的可见部分之间。

4.2. CSS2.1指出: 元素的背景是内容、内边距和边框区的背景。

5. 边框的样式

5.1. border-style属性用于设置元素所有边框的样式, 或者单独地为各边设置边框样式。

5.2. 只有当这个值不是none时边框才可能出现。

5.3. border-style属性是按照上、右、下、左的顺序来进行边框样式设置的, 遵从和内边距一样的值复制规则。

5.4. 默认值

5.5. 可能的值

5.6. 单边框样式

border-top-style: 设置上边框的样式。
border-right-style: 设置右边框的样式。
border-bottom-style: 设置下边框的样式。
border-left-style: 设置左边框的样式。

5.7. 例子

5.7.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>边框的样式</title>
		<meta charset="utf-8" />

		<style type="text/css">
			p {
				width: 650px; 
				background-color: orange;
			}
			#p1 {
				border-style: dotted;
			}
			#p2 {
				border-style: dashed;
			}
			#p3 {
				border-style: solid;
			}
			#p4 {
				border-style: double;
			}
			#p5 {
				border-style: groove;
			}
			#p6 {
				border-style: ridge;
			}
			#p7 {
				border-style: inset;
			}
			#p8 {
				border-style: outset;
			}
			#p9 {
				border-style: dotted none dashed hidden;
			}
			#p10 {
				border-top-style: solid;
			    border-right-style: none;
			    border-bottom-style: double;
			    border-left-style: groove;
			}
			img {
				border-style: outset;
			}
		</style>
	</head>
	<body>
		<p id="p1">border-style 属性, dotted值: 定义点状边框。在大多数浏览器中呈现为实线。</p>
		<p id="p2">border-style 属性, dashed值: 定义虚线。在大多数浏览器中呈现为实线。</p>
		<p id="p3">border-style 属性, solid值: 定义实线。</p>
		<p id="p4">border-style 属性, double值: 定义双线。双线的宽度等于 border-width 的值。</p>
		<p id="p5">border-style 属性, groove值: 定义3D凹槽边框。其效果取决于border-color的值。</p>
		<p id="p6">border-style 属性, ridge值: 定义3D垄状边框。其效果取决于border-color的值。</p>
		<p id="p7">border-style 属性, inset值: 定义3D inset边框。其效果取决于border-color的值。</p>
		<p id="p8">border-style 属性, outset值: 定义3D outset边框。其效果取决于border-color的值。</p>
		<p id="p9">border-style属性,hidden值:与"none"相同。不过应用于表时除外,对于表hidden用于解决边框冲突。</p>
		<p id="p10">border-style 属性, none值: 定义无边框。</p>
		<img src="btn.png" />
	</body>
</html>

5.7.2. 效果图

6. 边框的宽度

6.1. border-width 简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。

6.2. 只有当边框样式不是none时才起作用。如果边框样式是none, 边框宽度实际上会重置为0。不允许指定负长度值。

6.3. border-width属性是按照上、右、下、左的顺序来设置边框宽度的, 遵从和内边距一样的值复制规则。

6.4. 默认值

6.5. 可能的值

6.6. 单边框宽度

border-top-width: 设置上边框的宽度。
border-right-width: 设置右边框的宽度。
border-bottom-width: 设置下边框的宽度。
border-left-width: 设置左边框的宽度。

6.7. 例子

6.7.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>边框的宽度</title>
		<meta charset="utf-8" />

		<style type="text/css">
			p {
				width: 700px;
				background-color: orange;
				border-style: dotted;
			}
			#p1 {
				border-width: thin;
			}
			#p2 {
				border-width: medium;
			}
			#p3 {
				border-width: thick;
			}
			#p4 {
				border-width: 15px 10px 5px 8px;
			}
			#p5	{
				border-top-width: 15px;
			  	border-right-width: 10px;
			  	border-bottom-width: 5px;
			  	border-left-width: 8px;
			}
		</style>
	</head>
	<body>
		<p id="p1">border-width 属性, thin值: 定义细的边框。</p>
		<p id="p2">border-width 属性, medium值: 默认。定义中等的边框。</p>
		<p id="p3">border-width 属性, thick值: 定义粗的边框。</p>
		<p id="p4">border-width 属性, length允许您自定义边框的宽度。</p>
		<p id="p5">定义单边宽度:border-top-width border-right-width border-bottom-width border-left-width</p>
	</body>
</html>

6.7.2. 效果图

7. 边框的颜色

7.1. border-color简写属性为元素四条边框设置颜色。

7.2. border-color属性是按照上、右、下、左的顺序来设置边框颜色的。

7.3. 默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色, 它将与元素的文本颜色相同。另一方面, 如果元素没有任何文本, 假设它是一个表格, 其中只包含图像, 那么该表的边框颜色就是其父元素的文本颜色(因为color可以继承)。

7.4. 默认值

7.5. 可能的值

7.6. 定义单边颜色

border-top-color: 设置上边框的颜色。
border-right-color: 设置右边框的颜色。
border-bottom-color: 设置下边框的颜色。
border-left-color: 设置左边框的颜色。

7.7. 例子

7.7.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>边框的颜色</title>
		<meta charset="utf-8" />

		<style type="text/css">
			p {
				width: 700px;
				background-color: orange;
				border-style: dotted;
			}
			#p1 {
				border-color: blue;
			}
			#p2 {
				border-color: blue rgb(25%,35%,45%) #909090 red;
			}
			#p3 { 
			    border-top-color: blue;
			    border-right-color: rgb(25%,35%,45%);
			    border-bottom-color: #909090;
			    border-left-color: red;
		 	}
		</style>
	</head>
	<body>
		<p id="p1">border-color属性设置四条边框的颜色。此属性可设置1到4种颜色。</p>
		<p id="p2">可以使用任何类型的颜色值, 例如可以是命名颜色, 也可以是十六进制和RGB值</p>
		<p id="p3">定义单边颜色: border-top-color border-right-color border-bottom-color border-left-color</p>
	</body>
</html>

7.7.2. 效果图

8. 上边框

8.1. border-top简写属性把上边框的所有属性设置到一个声明中。

8.2. 可以按顺序设置如下属性:

border-top-width
border-top-style
border-top-color

9. 右边框

9.1. border-right简写属性把右边框的所有属性设置到一个声明中。

9.2. 可以按顺序设置如下属性:

border-right-width
border-right-style
border-right-color

10. 下边框

10.1. border-bottom简写属性把下边框的所有属性设置到一个声明中。

10.2. 可以按顺序设置如下属性:

border-bottom-width
border-bottom-style
border-bottom-color

11. 左边框

11.1. border-left简写属性把左边框的所有属性设置到一个声明中。

11.2. 可以按顺序设置如下属性:

border-left-width
border-left-style
border-left-color

12. 边框

12.1. border简写属性在一个声明设置所有的边框属性。

12.2. 可以按顺序设置如下属性:

border-width
border-style
border-color

12.3. 例子

12.3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>边框</title>
		<meta charset="utf-8" />

		<style type="text/css">
			#p1 {
				border-top: thin dotted #ff0000;
				border-right: medium dashed green;
				border-bottom: thick solid rgb(122, 127, 255);
				border-left: 10px groove rgb(25%,35%,45%);
		  	}
			#p2 {
                border: 1em ridge pink;
            }
		</style>
	</head>
	<body>
		<p id="p1">
		border-top简写属性把上边框的所有属性设置到一个声明中。
		border-right简写属性把右边框的所有属性设置到一个声明中。
		border-bottom简写属性把下边框的所有属性设置到一个声明中。
		border-left简写属性把左边框的所有属性设置到一个声明中。
		</p>
		<p id="p2">border简写属性在一个声明设置所有的边框属性。</p>
	</body>
</html>

12.3.2. 效果图