css3简记，了解一下？
云端漂移 2019-06-27
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" );
} );
完~
