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连写

你可能感兴趣的:(css)