爱站程序员基地一些最重要CSS3模块如下：
- 选择器
- 盒模型
- 背景和边框
- 文字特效
- 2D/3D转换
- 动画
- 多列布局
- 用户界面
CSS3 边框
CSS3边框属性有：
border-radius
、
box-shadow
border-image
CSS3圆角——border-radius
一个用于设置所有四个边框的半径属性的速记属性
语法：border-radius: 1-4 length|% / 1-4 length|%;
border-radius属性若只指定一个值，就会产生四个圆角
若要分开写则其他属性为：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
若需要在四个角上一一指定：
- 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
- 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
- 一个值： 四个圆角值相同
<style>div{border:2px solid black;background:#dddddd;width:200px;height:100px;border-radius:25px;}</style>
初始样式：
添加圆角属性之后的样式：
CSS3 盒阴影——box-shadow
附加一个或多个下拉框的阴影
语法：box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
<style>div{width:300px;height:100px;background-color:yellow;box-shadow: 10px 10px 5px #888888;}</style>
初始样式：
添加盒阴影属性之后的样式：
CSS3 边界图片——border-image
设置所有边框图像的速记属性。
语法：border-image: source slice width outset repeat|initial|inherit;
因为博主本主没有合适的边框图片，就采用了某菜的例子嘻嘻
<style>#borderimg1 {border: 10px solid transparent;padding: 15px;-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */border-image: url(border.png) 30 round;}#borderimg2 {border: 10px solid transparent;padding: 15px;-webkit-border-image: url(border.png) 30 stretch; /* Safari 3.1-5 */-o-border-image: url(border.png) 30 stretch; /* Opera 11-12.1 */border-image: url(border.png) 30 stretch;}</style>
效果图如下：
CSS3背景
CSS3新的背景属性：
- background-image
- background-size
- background-origin
- background-clip
CSS3 background-image属性
可以通过
background-image
属性添加背景图片。不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。
#image{background-image: url(img1.gif),url(img2.gif);}/*可以给不同的图片设置多个不同的属性*/#image{background: url(img1.gif) right bottom no-repeat, url(img2.gif) left top repeat;}
CSS3 background-size 属性
background-size
指定背景图像的大小，指定的大小是相对于父元素的宽度和高度的百分比的大小。
div{background:url(img1.gif);background-size:80px 60px;background-repeat:no-repeat;}/*伸展背景图像完全填充内容区域：*/div{background:url(img1.gif);background-size:100% 100%;background-repeat:no-repeat;}
CSS3 的 background-origin 属性
background-origin
属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。
/*在 content-box 中定位背景图片：*/div{background:url(img1.gif);background-repeat:no-repeat;background-size:100% 100%;background-origin:content-box;}
CSS3 background-clip属性
background-clip
背景剪裁属性是从指定位置开始绘制
#image {border: 10px dotted black;padding: 35px;background: yellow;background-clip: content-box;/*background-clip: padding-box;*/}
