CSS3

一些最重要CSS3模块如下：选择器 盒模型 背景和边框

边框

添加圆角元素：border-radius:25px;
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下，第四个值为左下。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值： 四个圆角
添加阴影:box-shadow: 10px 10px 5px #888888;
border-image 属性允许你指定一个图片作为边框！ 用于创建上文边框的原始图像：
border-image:url(border.png) 30 30 round; round 平铺 stretch 拉伸

背景

background-image
不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
background-size指定背景图像的大小。可以指定像素或百分比大小。
background-Origin属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。
background-clip背景剪裁属性是从指定位置开始绘制
详细实例请看 http://www.runoob.com/css3/css3-backgrounds.html

渐变（Gradients）

创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。
background: linear-gradient(red, blue); /* 从上到下的线性渐变 标准的语法 /
background: linear-gradient(to right, red , blue); /从左边开始的线性渐变 标准的语法 */

你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 设置透明度 */
background: repeating-linear-gradient(red, yellow 10%, green 20%); // 用于重复线性渐变
background: radial-gradient(red, green, blue); / * 径向渐变 标准的语法 * /
shape 参数定义了形状，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

文本效果

文本阴影 text-shadow: 5px 5px 5px #FF0000;
文本溢出 text-overflow: ellipsis;
font-style 定义字体的样式。 font-weight 定义字体的粗细。 默认都是 normal

动画

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
transform: translate(50px,100px);
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许，元素逆时针旋转
transform: rotate(30deg);
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数
transform: scale(2,3); 转变宽度为原来的大小的2倍，和其原始大小3倍的高度
@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
/* Safari 与 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear; 规定动画的速度曲线
-webkit-animation-delay: 2s; 规定动画何时开始
-webkit-animation-iteration-count: infinite; 规定动画被播放的次数
-webkit-animation-direction: alternate; 是否在下一周期逆向地播放
-webkit-animation-play-state: running; 规定动画是否正在运行或暂停

默认情况下，元素的宽度与高度计算方式如下：
width(宽) + padding(内边距) + border(边框) = 元素实际宽度
height(高) + padding(内边距) + border(边框) = 元素
如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中;
所有元素使用 box-sizing 是比较推荐的;
*{
box-sizing: border-box;
}

弹性盒子内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
在 HTML 中我们可以使用带 data- 前缀的属性来存储信息。