css-边框（border）

最新推荐文章于 2024-06-24 11:02:57 发布

WEB程序媛

最新推荐文章于 2024-06-24 11:02:57 发布

阅读量6.9k

点赞数 7

分类专栏： web前端文章标签： css3

本文链接：https://blog.csdn.net/qq_54282411/article/details/115312928

版权

web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

设置边框样式（border-style）
用于定义页面中边框的风格，常用属性：
none：没有边框线，即忽略所有边框的宽度（默认值）
solid：边框为单实线
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
在设置边框样式时，既可以对盒子的单边进行设置，也可以综合设置四条边的样式，常用属性：
border-top-style：上边框样式
border-right-style：右边框样式
border-bottom-style：下边框样式
border-left-style：左边框样式
border- style：上边框样式右边框样式下边框样式左边框样式
border- style：上边框样式左右边框样式下边框样式
border- style：上下边框样式左右边框样式
border- style：上下左右边框样式
案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置边框样式</title>
<style type="text/css">
	h2{
		border-style: solid;			/*四条边框相同--单实线*/
	}
	.one{
		border-style: dotted double;	/*上下为点线左右为双实线*/
	}
	.two{
		border-style: dashed dotted solid;/*上虚线、左右点线、下实线*/
	}
</style>
</head>

<body>
<h2>边框为单实线</h2>
<p class="one">上下边框为点线。左右边框为双实线</p>
<p class="two">上边框虚线、左右边框点线、下边框实线</p>
</body>
</html>

注意：点线dotted和虚线dashed样式存在兼容性问题。实际网页制作中，通常使用插入背景图像的形式实现点线或虚线的边框效果。
2. 设置边框宽度（border-width）
常用取值单位：像素px，常用属性：
border-top-width：上边框宽度
border-right-width：右边框宽度
border- botttom-width：下边框宽度
border- left-width：左边框宽度
border-width：上边框宽度[右边框宽度下边框宽度左边框宽度]
案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置边框高度</title>
<style type="text/css">
	.one{
		border-width: 6px;
	}
	.two{
		border-width: 4px 2px;
	}
	.three{
		border-width: 6px 4px 3px;
	}
	p{
		border-style: solid;
	}
</style>
</head>

<body>
<p class="one">边框宽度-2px。边框样式-单实线。</p>
<p class="two">边框宽度-上下3px，左右1px。边框样式-单实线。</p>
<p class="three">边框宽度-上3px，左右1px，下2px。边框样式-单实线。</p>
</body>
</html>

注意：在设置边框时，必须同时设置边框样式，如果未设置样式或设置为none，则不论宽度设置为多少都无效。
3. 设置边框颜色（border-color）
取值为预定义的颜色值、十六进制#RRGGBB或RGB格式rgb(r,g,b)，实际工作中最常用
的是十六进制#RRGGBB。
边框的默认颜色为元素本身的文本颜色，对于没有文本的元素，其默认边框为父元素的
文本颜色。属性：
border-top-color:上边框颜色
border- right-color:右边框颜色
border-bottom-color:下边框颜色
border-left-color:左边框颜色
border- color:上边框颜色[右边框颜色下边框颜色左边框颜色]
案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置边框颜色</title>
<style type="text/css">
	h2{
		border-style: solid;			/*综合设置边框样式*/
		border-top-color: #ff0000;		/*单独设置上边框颜色*/
	}
	p{
		border-style: solid;			/*综合设置边框样式*/
		border-color: #ccc #ff0000;		/*设置边框颜色：两个值为上下、左右*/
	}
</style>
</head>

<body>
<h2>设置边框颜色</h2>
<p>设置边框颜色</p>
</body>
</html>

注意：设置边框颜色时同样必须设置边框的样式，如果未设置样式或设置为none，则其他边框属性无效。
4. 综合设置边框
基本格式：border：宽度样式颜色；（宽度样式颜色的顺序不分先后，省略部分取默
认值，样式不能省略）。
案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>综合设置边框</title>
<style type="text/css">
	h2{
		border-top: 3px dashed #243d52;		/*单侧符合属性设置各边框*/
		border-right: 10px double #63abe8;
		border-bottom: 5px double #85f2da;
		border-left: 10px solid #1a5fad;
	}
	.wangya{
		border: 15px solid #4a4c5e;			/*border复合属性设置各边框相同*/
	}
	</style>
</head>

<body>
<h2>综合设置边框</h2>
<img class="wangya" src="pic1.png" alt="网页平面设计" />
</body>
</html>
```![最后一个案例所需图片](https://img-blog.csdnimg.cn/pic1.png#pic_center)

WEB程序媛

关注

7
点赞
踩
46

收藏

觉得还不错? 一键收藏
0
评论
css-边框（border）

一、边框（border）设置边框样式（border-style）用于定义页面中边框的风格，常用属性：none：没有边框线，即忽略所有边框的宽度（默认值）solid：边框为单实线dashed：边框为虚线dotted：边框为点线double：边框为双实线在设置边框样式时，既可以对盒子的单边进行设置，也可以综合设置四条边的样式，常用属性：border-top-style：上边框样式border-right-style：右边框样式border-bottom-style：下边框样式borde
复制链接

扫一扫

专栏目录