css3常用新增属性总结

css3新增选择器

• 属性选择器:    
  

                例如:   [data-info]     匹配有这个属性的标签

• 子级选择器:   

            ① 通过节点排队                    

:first-child	第一个子元素,  IE7兼容
:last-child	最后一个子元素
:nth-child(x)	第x个子元素,从1开始数
:nth-last-child(x)	倒数第x个子元素
:nth-child(xn-y)	从第y个开始每x个选一个

            ②通过类型排队

:first-of-type	第一个元素
:last-of-type	最后一个子元素
nth-of-type(x)	第x个子元素,从1开始数
nth-last-of-type(x)	倒数第x个子元素
nth-of-type(xn+y)	从第y个开始每x个选一个

• 关系选择器: >子级、+第一个同级、~所有同级,  IE7兼容

            例如: div >p、div +p、div ~p

• 唯一选择器:  :only-child、:only-of-type 唯一类型元素
• 空性选择器:  :empty 空元素
  
• 否定选择器:  :not(.app)  没有app类名的元素
  
• 伪类:   

:checked	被选中的表单元素
:enabled	有效的表单元素
:disabled	被禁用的表单元素
:focus	得到焦点的元素

• 伪元素:    把"::"改成":" 兼容IE8

::before	在子元素开头插入一个行内元素, 必须有属性content:"";
::after	在子元素开头插入一个行内元素, 必须有属性content:"";

• 伪元素选择器:

::selection	被选择的部分
:first-line	首行
:first-letter	第一个字符

css3新增颜色表示法: 

hsl(5%,100%,50%)    三个数值分别表示: 色相、饱和度、亮度

rgba(255,0,0,0.5)        最后一个数值表示透明度

css3新增属性:

border-radius:  设置圆角, v:  px | %

box-shadow:    设置盒子阴影

        例如:  box-shadow: 1px 2px 3px 4px red;

        v:    @1 向右偏移量

               @2 向下偏移量

               @3 模糊半径

               @4 延伸距离

               @5 颜色

text-shadow:  设置文字阴影

box-sizing: border-box;    padding和border在盒子中内减

background新增:

background-origin:   图片起源点

• v:content-box   背景图片从内容部分平铺(除padding)
  

background-clip:    背景区域

• v:  content-box  背景区域设置成内容区域(除padding)
  

background-size:    图片尺寸,v: px

background-image:    linear-gradient(180deg, red, blue );    设置渐变

过渡:

transition:  all  1s ease  0s;  

    v: @1  设置参与过渡的属性, all表示所有属性参与过渡

        @2   过渡动画完成的时间

        @3   设置完成时间内的快慢顺序, 可以用ease(慢快慢)、linear(匀速)、贝塞尔曲线定义

        @4    延迟执行的事件

变形: 2D,3D效果

transform:  变形

    v:  

• 2D效果
  

          rotate(30deg);                 旋转变形,  30deg表示旋转30度

          scale(2);                            缩放变形,  2表示方法3至2倍

          skew(10deg, 20deg);     斜切变形,  2个参数分别表示横向和纵向

• 3D效果    

         rotateX(10deg);             绕X轴空间旋转(横向)

           rotateY(10deg);             绕Y轴空间旋转(纵向)

• 空间移动

          translateX(100px);         沿着图片的X轴向图片的左边移动(人的右手边)

          translateY(100px);         沿着图片的Y轴向下移动

            translateZ(100px);        面向移动

           translate(100px, 100px);                      X, Y连写

         translate 3D(10px, 10px, 10px);        X,Y,Z连写