css属性之边框属性

最新推荐文章于 2022-07-12 14:28:55 发布

打不死滴小强

最新推荐文章于 2022-07-12 14:28:55 发布

阅读量586

点赞数

分类专栏： html5/css相关文章标签： css 边框属性

本文链接：https://blog.csdn.net/u012859748/article/details/52347530

版权

html5/css相关专栏收录该内容

26 篇文章 0 订阅

订阅专栏

本篇小结css属性的边框属性的一些使用方法。

<html>
	<head>
		<title>CSS常见属性(边框属性)</title>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				width:50px;
				height:50px;
				float:left;
				margin-right:10px;
				background-color:#f61;
				border-width:10px;
				
				border-color:green blue yellow black; /*green blue yellow black代表边框四个方向的颜色*/
				
			}
			.div0{
				border-style:solid;
				border-width:5px;  /*border-width边框宽度*/
			}
			.div1{
			border-top-style:solid;  /*solid直线边框*/
			}
			.div2{
				border-bottom-style:dashed; /*dashed虚线边框*/
			}
			.div3{
			border-left-style:dotted;  /*dotted点状边框*/
			}
			.div4{
				border-left-style:dotted;
				border-right-style:double;  /*double双线边框*/
			}
			.div5,.div6,.div7,.div8{
				
				width:85px;
				height:45px;
				/*border-width:20px;
				background:none;
				border-color:#ddd;*/
				border:solid 2px black;	/*简写的方式*/
				
			}
			.div5{
				border-style:groove; /*groove是凸槽边框*/
			}
			.div6{
				border-style:ridge;  /*ridge是垄状边框*/
			}
			.div7{
				border-style:inset;  /*inset是inset边框*/
			}
			.div8{
				border-style:outset;
			}
		</style>
	</head>
	<body>
		<div class="div0">div0</div>
		<div class="div1">solid</div>
		<div class="div2">dashed</div>
		<div class="div3">dotted</div>
		<div class="div4">double</div>
		<div class="div5">凸槽边框</div>
		<div class="div6">垄状边框</div>
		<div class="div7">inset</div>
		<div class="div8">outset</div>
	</body>
</html>