css边框线怎样设置【css教程】,border-style

CSS中的边框线能够经由过程border-style属性来设置，它能够设置成点状，虚线，实线，3D 凹槽边框、垄状边框、3D inset 边框等等

在HTML能够对标签添0加边框，边框能够是实线，点状或者是虚线，本日将要在文章中向人人分享的是边框的款式，具有肯定的残落作用，愿望对人人有所协助

【引荐课程：CSS教程】

边框款式：

border-style:

该属性是用于设置元素一切边框的款式，或者是单独地为各边设置边框款式

边框款式具有以下几种：

none：不定义边框，即无边框

dotted ：边框款式为点状边框

dashed ：边框款式为虚线

solid：边框款式为实线，在大多数浏览器中呈现为实线。

double：边框款式为双线。双线的宽度即是 border-width 的值。

groove：边框款式为 3D 凹槽边框，它的结果取决于 border-color 的值。

ridge ：边框款式为垄状边框，它的结果取决于 border-color 的值。

inset：边框款式为3D inset 边框，它的结果取决于 border-color 的值。

outset ：边框款式为 3D outset 边框，它的结果取决于 border-color 的值。

inherit：边框款式为应当从父元素继续边框款式。

案例：

设置边框的上边为点状，下边为虚线，摆布双方为实线

div{
			width:100px;
			height: 100px;
			border-style: dotted solid dashed solid;
			border-color: pink;
		}

结果图以下：

设置边框为3D 凹槽和垄状边框

<style type="text/css">
		.box1{
			width:100px;
			height:30px;
			border:5px groove pink;
			margin-bottom: 5px;

		}
		.box2{
			width:100px;
			height:30px;
			border:5px ridge  pink;

		}
	</style>
</head>
<body>
	<div class="box1">3D 凹槽边框</div>
	<div class="box2">垄状边框</div>
</body>

结果图