一、渐变:gradients

  线性渐变(linear gradients)

    background:-webkit-linear-gradient(90deg,red 10%,blue);

      1、需要有内核前缀

      2、方向可以为字母或者角度(left top right bottom)

      3、为角度时逆时针旋转

      4、颜色值数量不限

  径向渐变(radial gradients)

    background:-webkit-radial-gradient(90deg,red 10%,blue);

      1、不接受角度参数

      2、默认为center

二、倒影:box-reflect

    -webkit-box-reflect:below 0 -webkit-linear-gradient(top,rgba(0,0,0,0)20%,rgba(0,0,0,1));

      参数:方向(above,below,left,right),距离,渐变

  background-size 背景尺寸设置  px  %

三、背景裁切:

  background-clip

    border-box丨padding-box丨content-box

四、背景起点位置:background-origin

    border-box丨padding-box丨content-box

五、背景蒙板:-webkit-mask

  -webkit-mask-image:url丨gradient/*可以使用图片或渐变作为遮罩层*/

  -webkit-mask-repeat;repeat丨repeat-x丨repeat-y丨no-repeat

  -webkit-mask-position:x y;

  -webkit-mask-clip:border丨padding丨content

  -webkit-mask-origin:border丨padding丨content

 

posted on 2016-08-04 22:36  爱吃de馒头  阅读(149)  评论(0编辑  收藏  举报