CSS3中边框的相关属性

最新推荐文章于 2024-05-18 14:24:10 发布

原创最新推荐文章于 2024-05-18 14:24:10 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#border # 边框 # CSS3

CSS 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了CSS中边框样式的设置方法，包括边框的颜色、宽度及线型等属性，并展示了各种边框线型的实际效果。

边框相关属性用于设置目标对象的边框特征，包括边框颜色，粗细，以及使用的线型，边框的相关属性有如下几个：

border：这是一个复合属性，用于设置目标元素的边框样式，可以同时设置边框的粗细，线型和颜色。
border-color: 用于设置元素的边框颜色。
参数作用方式：如果提供4个参数值，则按照上右下左的顺序（顺时针）一次设置边框的颜色，如果提供1个参数，则将用于设置4个边框的颜色。如果提供2个参数，则第一个参数作用与上下边框，第二个参数作用于左右边框，如果提供3个参数，则第一个参数作用于上边框，第二个参数作用于左右边框，第三个参数作用于下边框。
border-width:用于设置边框的宽度。其不同数目的参数作用方式同border-color。
border-style：用于设置元素的边框线型，其不同数目的参数作用方式同border-color。
border-top:这是一个符合属性，用于设置目标元素的上边框样式，可以同时设置边框的颜色，宽度和线型。
border-top-color:用于设置目标元素的上边框颜色
border-top-style:用于设置目标元素的上边框的线型
border-top-width:用于设置目标元素的上边框的宽度
其它设置右边框、下边框和左边框的方式同上。

边框的线型有如下值：

none：无边框
hidden：隐藏边框
dotted：点线边框
dashed：虚线边框
solid：实线边框
double：双线边框
groove：3D凹槽边框
ridge：3D凸槽边框
inset：3D凹入边框
outset：3D凸出边框

        <style type="text/css">
		div{
		    margin: 10px;
		}
	</style>
	<body>
		
		<div style="border: 1px none; width:40%;height:100px;" ></div>
		<div style="border:2px hidden; width:40%;height:100px; "></div>
		<div style="border:  3px dotted;width:40%;height:100px; " ></div>
		<div style="border: 4px dashed;width:40%;height:100px; " ></div>
		<div style="border: solid;width:40%;height:100px;"></div>
		<div style="border: double;width:40%;height:100px; "></div>
		<div style="border:  20px groove;width:40%;height:100px;"></div>
		<div style="border: 10px ridge;width:40%;height:100px; ;"></div>
		<div style="border: inset;width:40%;height:100px; "></div>
		<div style="border: outset;width:40%;height:100px; "></div>
		
		
	</body>

效果如下：