（1）.背景相关属性
背景相关属性
background-color:#aaa
测试文字
background-image:url(wjc.gif)
测试文字
background-image:url(wjc.gif);background-repeat: no-repeat
测试文字
background-image:url(logo.gif);background-repeat: repeat-x
测试文字
background-image:url(wjc.gif);background-repeat:no-repeat;
background-position: 35% 80%;
测试文字
background-image:url(wjc.gif);background-repeat:no-repeat;
background-position: 30px 12px;
测试文字
background-image:url(wjc.gif);background-repeat:no-repeat;
background-position: center bottom;
测试文字
image.png
1.背景图片固定
backgroud-attachment:fixed
背景固定
image.png
2.CSS3新增的背景相关属性
image.png
background-clip:
- border-box: 背景覆盖border,padding,content
- no-clip:背景覆盖border,padding,content
- padding-box:背景覆盖padding,content
- content:背景覆盖content
背景相关属性
background-image:url(wjc.gif)
测试文字
background-image:url(wjc.gif);background-clip:no-clip;
测试文字
background-image:url(wjc.gif);background-clip:padding-box;
测试文字
background-image:url(wjc.gif);background-clip:content-box;
测试文字
image.png
background-origin:
背景相关属性
background-image:url(wjc.gif);background-origin:content;
测试文字
background-image:url(wjc.gif);background-origin:padding;
测试文字
background-image:url(wjc.gif);background-origin:border;
测试文字
image.png
background-size:
背景相关属性
background-image:url(wjc.gif)
background-image:url(wjc.gif);background-size:100% 80%;
(背景图片的宽度与组件宽度相同、高度为组件高度的80％)
background-image:url(wjc.gif);background-size:20% auto;
(背景图片的宽度为组件宽度20%、高度保持纵横比缩放)
background-image:url(wjc.gif);background-size:auto 50%;
(背景图片的宽度保持纵横比缩放、高度为组件宽度50%)
background-image:url(wjc.gif);;background-size:60px 30px;
(背景图片的宽度为60px、高度为30px)
background-image:url(wjc.gif);background-size:40px auto;
(背景图片的宽度为40px，高度保持纵横比缩放)
background-image:url(wjc.gif);background-size:auto 50%;
(背景图片的宽度保持纵横比缩放、高度为组件宽度20px)
image.png
3.CSS3新增的多背景图片
背景相关属性
image.png
（2）.边框相关属性
border
border-color
border-style
border-width
边框相关属性测试
border:5px solid #666
宽度为5的灰色实线边框
border:2px dashed #666
宽度为2的灰色虚线边框
border:2px dotted #666
宽度为2的灰色点线边框
border:5px groove #666
宽度为5的灰色凹槽边框
border:8px inset #666
宽度为8的灰色的凹入边框
border:8px outset #666
宽度为8的灰色的凸出边框
border-width:8px 2px;border-style:solid dashed;border-color:#ccc #444;
上下两条边框样式为：8px solid #ccc;
左右两条边框样式为：2px dashed #444
border-width:3px;border-style:solid;border-color:#ccc #ccc #444 #444;
让四条边框颜色不同作出的立体效果
image.png
1.圆角边框
border-top-right-radius
border-top-left-radius
border-bottom-right-radius
border-bottom-left-radius
渐变边框
半径为20px的圆角边框
半径为20px的圆角边框
半径为20px的圆角边框（不显示边框）
半径为16px 40px的圆角边框
半径为10px 20px 40px;的圆角边框
半径为10px 20px 30px 40px的圆角边框
分开指定4个角的半径
image.png
2.CSS3提供了图片边框
border-image-source
border-image-slice
border-image-width
border-image-repeat
图片边框
border-image: url(border.png) 27
默认边框宽度
border-image: url(border.png) 27/27px
指定边框宽27px，默认是拉伸边框图片
border-image: url(border.png) 27/27px repeat
指定边框宽27px，平铺边框图片
border-image: url(border.png) 27/27px round;
指定边框宽27px，round方式平铺边框图片
border-image: url(border.png) 27/27px stretch round;
指定边框宽27px，横向stretch方式覆盖边框图片，
纵向round方式平铺图片
image.png
（3）补丁相关属性
padding
padding-top padding-bottom padding-left padding-right
轮廓相关属性测试
padding:10px 50px;
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
padding:10px 30px 2px 60px;
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
image.png
margin
margin-top margin-bottom margin-right margin-left
轮廓相关属性测试
margin:30px 50px;
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
margin:10px 40px 10px 90px;
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
image.png