CSS3-使用边框和背景

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	    图像位置-->
<!--  background-attachment		图像是否固定或随页面一起滚动-->
<!--  background-clip		图像裁剪方式-->
<!--  background-origin		图像绘制起始位置-->
<!--  background		简写属性-->

<!-- 设置背景图像和颜色 -->
<style type = "text/css">
	body {
		background-color: lightgray;
		background-image: url(pic.jpg);
		background-size: 40px 40px ;
		background-repeat: repeat-x ;
		background-attachment: fixed;
	}
</style>
<!-- background-repeat 可用属性 repeat-x, repeat-y, repeat, space, round, no-repeat -->

<!-- background-size 可用属性: contain, cover, auto -->

<!-- background-position 可用属性: top, left, right, bottom, center -->

<!-- background-attachment 可用属性: fixed(背景固定在视窗上),   -->
<!--								 local(背景随滚动条一起动), -->
<!--								 scroll(背景固定在元素上)   -->

<!-- background-origin 和 background-clip 可用元素 -->
<!--								 border-box		在边框盒子内部-->
<!--								 padding-box	在内边距盒子内部-->
<!--								 content-box	在内容盒子内部-->

<!-- 使用background简写属性 -->
<style type = "text/css">
	table {
		background: lightgray top right no-repeat border-box content-box local url();
	}
</style>
<!-- 有些浏览器还不支持这个 background 简写属性 -->



<!-- 创建盒子阴影 -->
<!-- box-shadow: -->
<!-- box-shadow: hoffset voffset blur spread color inset	-->
<!--			hoffset 阴影水平偏移量,正值右移,负值左移	-->
<!--			voffset 阴影垂直偏移量,正值下方,负值上方	-->
<!--			blur (可选)   模糊值, 值越大越模糊,默认为0,边界清晰  -->
<!--			spread (可选) 阴影延伸半径,正值扩大,负值缩小	-->
<!--			color  (可选) 阴影颜色							-->
<!--			inset  (可选) 将外部阴影设置为内部阴影			-->
<!--  可以在box-shadow中定义多个阴影,只需要用逗号隔开 -->
<style type = "text/css">
	table {
		box-shadow: 5px 4px 10px 2px gray;
	}
</style>

<style type = "text/css">
	table {
		box-shadow: 5px 4px 10px 2px gray / 4px 4px 6px gray inset;
	}
</style>



<!-- 应用轮廓 -->
<!--  轮廓绘制在盒子边框的外面,轮廓不属于页面,应用轮廓不需要调整页面布局 -->
<!--  outline-color: 外围轮廓颜色 -->
<!--  outline-offset: 轮廓距离元素边框偏移量 -->
<!--  outline-style: 轮廓样式 和 border-style一样 -->
<!--  outline-width: 轮廓宽度 -->
<!--  outline-color: 简写属性 -->
<style type = "text/css">
	table {
		outline-offset: 20px;
		outline-style: outset;
		outline-width: 3px;
	}
</style>