关闭

css属性之边框属性

标签: css边框 属性
75人阅读 评论(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>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:27492次
    • 积分:791
    • 等级:
    • 排名:千里之外
    • 原创:52篇
    • 转载:4篇
    • 译文:0篇
    • 评论:5条
    最新评论