CSS3-使用边框和背景

<!-- 使用边框样式 -->
<!-- border-width  设置边框宽度 -->
<!-- border-style  设置绘制边框使用样式 -->
<!-- border-color  设置边框使用颜色 -->

<!-- 定义边框宽度 -->
<!-- 可用属性:  -->
<!--		css度量单位,如em, px, cm	-->
<!--		<百分数>					-->
<!--		thin, medium, thick			-->
<style type = "text/css">
	 p {
		border-width: 10px;		
	}
</style>



<!-- 定义边框样式 -->
<!-- 可用属性:  -->
<!--	none  没有边框 (默认)	-->
<!--	dashed  破折线式边框	-->
<!--	dotted	圆点线式边框	-->
<!--	double	双线式边框		-->
<!--	groove	槽线式边框		-->
<!--	inset	内嵌效果边框	-->
<!--	outset	外凸效果边框	-->
<!--	ridge	脊线边框		-->
<!--	solid	实线边框		-->
<style type = "text/css">
	p {
		border-style: outset;
	}
</style>


<!-- 为一条边应用边框样式 -->
<!-- border-top-width	-->
<!-- border-top-style	-->
<!-- border-top-color	-->
<!-- border-bottom-width	-->
<!-- border-bottom-style	-->
<!-- border-bottom-color	-->
<!-- border-left-width	-->
<!-- border-left-style	-->
<!-- border-left-color	-->
<!-- border-right-width	-->
<!-- border-right-style	-->
<!-- border-right-color	-->
<style type = "text/css">
	p {
		border-width: 5px;
		border-style: solid;
		border-color: black;
		border-left-width: 10px;
		border-left-style: dotted;
		border-top-width: 10px;
		border-top-style: dotted;
	}
</style>


<!-- 使用border简写属性 -->
<!--	border: <宽度> <样式> <颜色>		-->
<!--	border-top: <宽度> <样式> <颜色>	-->
<!--	border-bottom: <宽度> <样式> <颜色> -->
<!--	border-left: <宽度> <样式> <颜色>	-->
<!--	border-righr: <宽度> <样式> <颜色>  -->
<style type = "text/css">
	p {
		border: medium outset green;
		border-top: 10px inset;
	}
</style>


<!-- 创建圆角边框 -->
<!-- 可用属性:	  -->
<!--  border-top-left-radius: -->
<!--  border-top-right-radius: -->
<!--  border-bottom-left-radius: -->
<!--  border-bottom-right-radius: -->
<!--  border-radius:			 -->
<!--	值可为  <长度值>  <百分数>  -->
<style type = "text/css">
	p {
		border: medium outset green;
		border-top-left-radius: 10px 5px;
		border-top-right-radius: 10px;
	}
</style>

<style type = "text/css">
	p {
		border: medium outset green;
		border-radius: 10px / 5px;
		border-radius: 10px 10px 10px 10px / 5px 5px 5px 5px;
	}
</style>
<!--  水平半径 / 垂直半径 -->



<!-- 将图像用作边框 -->
<!-- border-image-source: 设置图像来源 -->
<!-- border-image-slice: 设置切分图像偏移 -->
<!-- border-image-width: 设置图像边框的宽度 -->
<!-- border-image-outset: 设置图像向外扩展的部分 -->
<!-- border-image-repeat: 设置图像填充边框区域的模式,可为: stretch repeat round -->
<!-- border-image: 简写属性 -->
<!-- 目前 许多浏览器暂不支持该属性,一些浏览器支持但需要用厂商特定前缀 -->
<style type = "text/css">
	p {
		-webkit-border-image: url(icon.png) 30 / 50px;
		-moz-border-image: url(icon.png) 30 / 50px;
		-o-border-image: url(icon.png) 30 / 50px;
	}
</style>
<!-- 浏览器相应的厂商前缀 -->
<!-- chrome safari    -webkit- -->
<!-- Opera			  -o-	   -->
<!-- Firefox		  -moz	   -->
<!-- Internet Explorer -ms-    -->


<!--  控制切分图重复方式 -->
<!--  border-image-repeat:  stretch repeat round space -->
<style type = "text/css">
	p {
		-webkit-border-image: url(icon.png) 30 / 50px round repeat;
		-moz-border-image: url(icon.png) 30 / 50px round repeat;
		-o-border-image: url(icon.png) 30 / 50px round repeat;
	}
</style>



<!-- 设置元素的背景 -->
<!--  background-color		背景颜色,显示在背景图像下面-->
<!--  background-image		背景图像,如果指定一个以上图像,则后面图像绘制在前面图像的下面-->
<!--  background-repeat		图像重复方式-->
<!--  background-size		图像尺寸-->
<!--  background-position	    图像位置-->
<!