css前端之边框_前端方框-CSDN博客

本文链接：https://blog.csdn.net/daneeee/article/details/88881262

border

其有三个属性
分别是宽度，颜色，样式。border-width border-color border-style
还有四个面，border-right，border-bottom，border-left，border-top
其的样式有九种

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="border-style:dashed;color:#0000FF;padding:10px">
			破折线式边框
		</div>
		<div style="border-style:dotted;color:red;">
			点线式边框
		</div>
		<div style="border-style:double;color:yellow;">
			双线框
		</div>
		<div style="border-style:groove;color:plum;">
			槽线式边框(颜色不会改变？？？)
		</div>
		<div style="border-style:inset;color:black;">
			内嵌效果的边框
		</div>
		<div style="border-style:outset;color:yellow;">
			凸起效果的
		</div>
		<br/>
		<div style="border-style:ridge;color:yellow;">
			脊线效果的
		</div>
		<div style="border-style:solid;color:yellow;">
			直线效果的
		</div>
		<div style="border-style:none;color:yellow;">
			直线效果的
		</div>
	</body>
</html>

在这里插入图片描述有一些特别的样式信息
border-radius：表示边框的半径使边框四周变椭圆
box-shadow：用于向方框添加阴影其后的值有h-shadow （水平阴影）v-shadow （垂直阴影）blur（模糊距离） spread （阴影尺寸）color inset（阴影在方框里面）;
border-image：用于设置 border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat 的值.

所以对于每一个属性来说都可能有1到4个不同的属性值
例如：
2个指定值意义：第一个值为上下边框属性赋值，第二个值为左右边框属性赋值。
3个指定值的意义：第一个值为上边框属性赋值，第二个值为左右边框属性赋值，第三个值为下边框属性赋值。
4个指定值的意义：第一值为上边框属性赋值，第二个值为右边框属性赋值，第三个值为下边框属性赋值，第四个值为左边框赋值。