0、前言

css3常用属性在用的时候总有那么一两点记不住，每次去搜教程，重复做功，自己动手，在这简记一下，加深印象。

1、css3圆角border-radius (IE9+)

使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。如果你要在四个角上一一指定，可以使用以下规则：

• 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角；
• 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角；
• 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角；
• 一个值：四个圆角值相同；

用纯css3写一个Opera浏览器logo，

.opera-outer {width: 258px;height: 278px;background-color: #f22629;    border-radius: 129px/139px;position: relative;
}
.opera-inner {width: 116px;height: 236px;background-color: #fff;    border-radius: 58px/118px;position: absolute;left: 70px;top: 20px;
}

get到知识点：
border-radius: 129px/139px;这种写法，129px是椭圆水平半径，139px是椭圆垂直半径。当椭圆半径和超出宽高时，会自动缩放椭圆以满足镶嵌在矩形里。

2、css3背景

2.1 background-image （ie9+）

添加多背景图片

background: url( "../image/img_flwr.gif" ) right bottom no-repeat, url("../image/paper.gif") left top repeat;

等价于

background-image: url("../image/img_flwr.gif"), url("../image/paper.gif");
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;

2.2 background-orign（ie9+）

指定了背景图像的位置区域，取值：border-box，padding-box，content-box。

2.3 background-clip（ie9+）

背景剪裁属性是从指定位置开始绘制，取值：border-box，padding-box，content-box。

综合知识点绘制如下

background: url( "../image/img_flwr.gif" ) right bottom no-repeat, url("../image/paper.gif") left top repeat;
border: 20px solid rgba( 0, 0, 0, 0.1 );
padding: 20px;
background-origin: border-box;
background-clip: content-box;

3、css3渐变 linear-gradient (IE10+)

3.1 默认从上到下渐变

#grad {background: -webkit-linear-gradient(red, yellow); /* Safari 5.1 - 6.0 */background: -o-linear-gradient(red, yellow); /* Opera 11.1 - 12.0 */background: -moz-linear-gradient(red, yellow); /* Firefox 3.6 - 15 */background: linear-gradient(red, yellow); /* 标准的语法 */
}

3.2 从左向右渐变

#grad {background: -webkit-linear-gradient(left, red, yellow); /* Safari 5.1 - 6.0 */background: -o-linear-gradient(left, red, yellow); /* Opera 11.1 - 12.0 */background: -moz-linear-gradient(left, red, yellow); /* Firefox 3.6 - 15 */background: linear-gradient(to right, red, yellow); /* 标准的语法 */
}

3.3 有角度的变换

#grad {background: -webkit-linear-gradient(90deg, red, yellow); /* Safari 5.1 - 6.0 */background: -o-linear-gradient(90deg, red, yellow); /* Opera 11.1 - 12.0 */background: -moz-linear-gradient(90deg, red, yellow); /* Firefox 3.6 - 15 */background: linear-gradient(90deg, red, yellow); /* 标准的语法 */
}

3.4 对角线

#grad {background: -webkit-linear-gradient(left top, red, yellow); /* Safari 5.1 - 6.0 */background: -o-linear-gradient(left top, red, yellow); /* Opera 11.1 - 12.0 */background: -moz-linear-gradient(left top, red, yellow); /* Firefox 3.6 - 15 */background: linear-gradient(to right bottom, red, yellow); /* 标准的语法 */
}

3.5 重复线性渐变 repeating-linear-gradient

#grad {/* Safari 5.1 - 6.0 */background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);/* Opera 11.1 - 12.0 */background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);/* Firefox 3.6 - 15 */background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);/* 标准的语法 */background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

3.6 径向渐变 radial-gradient

#grad {/* Safari 5.1 - 6.0 */background: -webkit-radial-gradient(circle, red 5%, yellow 15%, green);/* Opera 11.1 - 12.0 */background: -o-radial-gradient(circle, red 5%, yellow 15%, green);/* Firefox 3.6 - 15 */background: -moz-radial-gradient(circle, red 5%, yellow 15%, green);/* 标准的语法 */background: radial-gradient(circle, red 5%, yellow 15%, green);
}

3.7 重复径向渐变 repeating-radial-gradient

#grad {/* Safari 5.1 - 6.0 */background: -webkit-repeating-radial-gradient(red, yellow 5%, green 10%);/* Opera 11.1 - 12.0 */background: -o-radial-repeating-gradient(red, yellow 5%, green 10%);/* Firefox 3.6 - 15 */background: -moz-radial-repeating-gradient(red, yellow 5%, green 10%);/* 标准的语法 */background: repeating-radial-gradient(red, yellow 5%, green 10%);
}

4、css3文本效果

4.1 text-shadow (IE10+)

text-shadow: 4px 4px 4px #F00; (x轴偏移量，y轴偏移量，阴影模糊半径，阴影颜色)

4.2 box-shadow (IE9+)

box-shadow: 0px 0px 4px 4px #ccc;(x轴偏移量，y轴偏移量，阴影模糊半径，阴影拓展半径，阴影颜色)

多个阴影之间用逗号分隔
box-shadow: 0px -4px 4px 0px black,0px 4px 4px 0px red,4px 0px 4px 0px green,-4px 0px 4px 0px blue;

注意，当有两个阴影重叠时，在前面设置阴影在上层

在低版本的ie下使用shadow滤镜，filter:progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度（数值）,Strength=阴影半径（数值）);

注意：该滤镜必须配合background属性一起使用，否则该滤镜失效。

4.3 text-overflow (IE9+)

指定应向用户如何显示溢出内容

overflow: hidden;
text-overflow: ellipsis; /* clip */
white-space: nowrap; /*文本在同一行，直到有<br>标签*/
/*可能取值：normal默认换行，空白忽略， pre行为类似标签pre，nowrap不换行，pre-wrap空白换行，pre-line合并空格换行*/

4.4 word-wrap break-word

word-wrap: break-word; /* 允许长文本换行 */
break-word: all-break; /* 允许单词拆分换行 */

5、css3 2D转换 (IE10+ IE9 -ms)

5.1 translate 偏移

IE9需要-ms前缀，Safari和chrome需要-webkit前缀

transform: translate(<length>[, <length>]); // 第一个参数x方向长度，第二个参数y方向长度
transform: translateX(<length>);
transform: translateY(<length>);

5.2 rotate 旋转

transform: rotate(ndeg);

5.3 scale 缩放

transform: scale(<number>[, <number>]);
transform: scaleX(<number>);
transform: scaleY(<number>);

5.4 skew 倾斜

transform: skew(<angle> [, <angle>]);
transform: skewX(<angle>);
transform: skewY(<angle>);

5.5 matrix 矩阵转换

matrix(<number>,<number>,<number>,<number>,<number>,<number>)：
以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵

6、css3 3D转换 (IE10+)

6.1 rotateX 绕x轴旋转

transform: rotateX(ndeg);

6.2 rotateY绕y轴旋转

transform: rotateY(ndeg);

7、css3 过渡 transition(IE10+)

css3过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：指定添加效果的css属性，指定效果的持续时间。

transition-property：
检索或设置对象中的参与过渡的属性

transition-duration：
检索或设置对象的持续时间

transition-timing-function：
检索或设置对象中过渡的动画类型

transition-delay：
检索或设置对象延迟过渡的时间

For Example：
可以为同一个元素的多个属性定义过渡效果
缩写：

transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;

等价拆分：

transition-property:border-color,background-color,color;
transition-duration:.5s;
transition-timing-function:ease-in;
transition-delay:.1s;

过渡类型

• linear：

线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

• ease：

平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

• ease-in：

由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)

• ease-out：

由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

• ease-in-out：

由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

• step-start：

等同于 steps(1, start)

• step-end：

等同于 steps(1, end)

• steps(<integer>[, [ start | end ] ]?)：

接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。

• cubic-bezier(<number>, <number>, <number>, <number>)：

特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

8、css3 动画animation (IE10+)

8.1 @keyframes

要创建css3动画，@keyframes是必不可少的，它用来指定一个css样式和动画将逐步从目前的样式更改为新的样式。

@keyframes mykeyfreames {
form: {},
to: {}
}

8.2 animation

动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

• animation-name:

检索或设置对象所应用的动画名称

• animation-duration:

检索或设置对象动画的持续时间

• animation-timing-function:

检索或设置对象动画的过渡类型

• animation-delay:

检索或设置对象动画延迟的时间，默认为0

• animation-iteration-count:

检索或设置对象动画的循环次数，无限次 definite

• animation-direction:

检索或设置对象动画在循环中是都反向运动，
取值：normal, reverse(反向播放), alternate(奇数次正向播放，偶数次反向播放), alternate-reverse(奇数次反向播放，偶数次正向播放)

• animation-play-state:

检索或设置对象动画的状态，w3c考虑移除

9、结合transition,box-shadow,translate写一个iphone-switch

/* css */
/* 开关按钮背景 */
.iphone-switch {display: inline-block;width: 42px;height: 20px;border: 1px solid #aaa;border-radius: 10px;background-color: #eee;-webkit-box-shadow: inset 0 0 0 0 #ddd;box-shadow: inset 0 0 0 0 #ddd;-webkit-transition: all .2s ease-in;transition: all .2s ease-in;
}
/* 用伪元素:before做开关 */
.iphone-switch:before {content: "";display: block;width: 20px;height: 20px;border-radius: 10px;background-color: #fff;-webkit-transition: all .2s ease;transition: all .2s ease;
}.iphone-switch.checked {-webkit-box-shadow: inset 0 0 0 10px #4bed90; box-shadow: inset 0 0 0 10px #4bed90;
}.iphone-switch.checked:before {-webkit-transform: translate(22px, 0px);transform: translate(22px, 0px);
}

// js
$( ".iphone-switch" ).click( function() {$(this)[ $(this).hasClass( "checked" ) ? "removeClass" : "addClass" ]( "checked" );
} );

完~