winson的专栏

爱生活

css属性之边框属性

本篇小结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>


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012859748/article/details/52347530
文章标签: css 边框 属性
个人分类: html5/css相关
上一篇css常用属性之文本属性
下一篇css属性之列表属性
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭