CSS3

学习网址：CSS3学习

css3是css的基础上进行修改与增补

1: CSS3选择器部分

最常用的有：

E:nth-child(n)              配父元素中的第n个子元素E；n可以是1,2，3..；odd表示奇数,even表示偶数；

E:first-child 匹配父元素中第一个子元素的E元素（不包括后代元素）

E:last-child 匹配父元素中最后一个子元素的元素（不包括后代元素）

 

E:target 匹配相关URL指向的E元素，叫目标选择器

E:nth-last-child(n)               匹配父元素中的倒数第n个结构子元素E

E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E

E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E

E:first-of-type                       匹配同级兄弟元素中的第一个E元素

E:only-child                          匹配属于父元素中唯一子元素的E

E:only-of-type 匹配属于同类型中唯一兄弟元素的E

E[att^="val"] 匹配具有att属性、且值以val开头的E元素

E[att$="val"] 匹配具有att属性、且值以val结尾的E元素

E[att*="val"] 匹配具有att属性、且值中含有val的E元素

E:root 匹配文档的根元素。在HTML中，根元素永远是HTML

E:empty 匹配没有任何子元素（包括text节点）的元素E

E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素

E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素

E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E

E::selection 匹配E元素中被用户选中或处于高亮状态的部分

E:not(s) 匹配所有不匹配简单选择符s的元素E

E ~ F 匹配E元素之后的F元素

具体使用教程：CSS3使用讲解

2、圆角、阴影、渐变

border-radius 圆角（左上、右上、右下、左下）

box-shadow 阴影（外阴影：4px 2px 6px #333）（内阴影：4px 2px 6px #333 inset）

text-shadow

渐变：

　　　从上到下的线性渐变：

　　　

　　　线性渐变 - 从左到右：

　　　

　　　从左上角到右下角：

　　　

　　　使用多个颜色结点：

　　　

3、变形transform：

rotateX/Y/Z 旋转（正值顺时针；负值逆时针）

scale（x,y） 缩放（没写y，说明x和y缩放一样不是没有缩放）；scaleY（1.5）仅y变为1.5倍

translate（x,y）(10px 20px)向右10下20；translateX(x)向x轴；translateY(y)向y轴

            translate：transform-origin,

            transition-property,指定过渡或动态模拟的css属性

            transition-duration,完成过渡所需时间

            transition-timing-function,

            transition-delay，指定开始延迟时间

skew 改变形状（倾斜）

matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]

变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素。

4、动画

animation-name （none无动画效果会覆盖所有）

animation-duration

animation-timing-function

animation-delay

animation-iteration-count -webkit-animation-direction

5、背景、边框背景

background-origin 设置背景图片的起始位置（border-box|padding-box|content-box)

background-clip 背景图剪裁（border-box|padding-box|content-box|no-clip）

background-size 背景图大小（auto|20px 30px|cover(等比缩放填满容器)|contain）

multiple backgrounds 多重背景

border-image