css属性之边框属性

原创 2016年08月28日 20:20:55

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


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

CSS属性之边框与列表

本篇,首先来介绍的是边框属性,内容比较多,还基本还是很简单的。 代码演示: CSS属性之边框 div{ ...

HTML5基础加强css样式篇(css属性border详解:图片边框border-image-slice,border-image-repeat,border-image-width(二))(三十四)

1.图片边框:可以使用图片制作边框 先通过四根线把图片分成九份,中间一份为内容区域;其他分别对应边框的对应部分; 分割线属性: border-image-slice 代码如下: ...

css属性文档

  • 2015年07月22日 17:43
  • 6KB
  • 下载

css属性大全

  • 2014年08月14日 11:52
  • 1.64MB
  • 下载

CSS属性、BFC、IFC

定位属性1.clear 规定哪一侧不允许元素浮动 left 在左侧不允许浮动元素。 right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出...

css属性表,非常详细

  • 2011年05月11日 10:57
  • 3KB
  • 下载

css属性继承

  • 2012年04月17日 11:22
  • 6KB
  • 下载

巧用浏览器CSS属性值的不兼容向下兼容hack技巧

一、巧用浏览器CSS属性值实现向下兼容 CSS3中有很多好的特性,例如box-shadow盒阴影,但是,唯一的问题是IE8浏览器不支持,如果是对外的PC站点,则IE8浏览器不可不顾,尤其一些受众...
  • lamenw
  • lamenw
  • 2016年10月31日 14:22
  • 630

Css属性文档

  • 2012年10月20日 13:39
  • 49KB
  • 下载

CSS属性速查表

  • 2014年10月16日 11:08
  • 443KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css属性之边框属性
举报原因:
原因补充:

(最多只允许输入30个字)