03、CSS3-UI样式

一、圆角

• border-radius: 圆角

 - border-radius: 10px;  即四个边角都一样
 - border-radius: 10px 20px;  对角即左上&右下    右上&左下
 - border-radius: 10px 20px 30px; 即左上、 右上&右下 、左下
 - border-radius: 10px 20px 30px 40px;  即左上角开始，顺时针(左上、右上、右下、左下)

  备注: 
    正方形设置成圆形 border-radius: width/2; 【border-radius: 50%;  】
    矩形设置成椭圆 border-radius: (width/2) / (height/2);

二、线性渐变

• linear-gradient线性渐变

  语法: 
    linear-gradient([<起点> || <角度>,]? <点>, <点>…)
  参数:
    起点: 从什么方向开始渐变(默认top)left/right/top/bottom
    角度: 从什么角度开始渐变(xxxdeg)
    点: 渐变点的颜色和位置(black 50%，位置可选)  background: linear-gradient(red, blue);  background: linear-gradient(left top, red, blue);  // 左上角开始  background: linear-gradient(30deg, red, blue);  // 起点为0，逆时针30度  background: linear-gradient(30deg, red, blue, yellow);  // 后续添加多个颜色点  background: linear-gradient(30deg, red 10px, blue 40px, yellow 80px, purple 140px, pink 200px, black 260px, gray 300px, red 360px);  // 颜色具体的位置点background: linear-gradient(30deg, red 0, black 30%, blue 60%);  // 位置的百分比

浏览器的内核，主要有 Mozilla（Firefox，Flock等）、WebKit（Safari、Chrome等）、Opera（Opera浏览器）、Trident（万恶的IE浏览器）
background: -webkit-linear-gradient(left top, red, blue);  // Mozilla
background: -moz-linear-gradient(left top, red, blue);  // WebKit
background: -ms-linear-gradient(left top, red, blue);  // Trident
background: -o-linear-gradient(left top, red, blue);  // Opera
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');  // IE低版本通过滤镜来处理，而且也只能是线性渐变(GradientType方向: 0从上到下，1从左到右)
background: -o-linear-gradient(left top, red, blue);  // Opera
*** background: linear-gradient(30deg, red, blue);  【标准的语法1】***
*** background: linear-gradient( to left, red, blue);  【标准的语法2】***

• repeating-linear-gradient重复线性渐变

  // 以0~40px渐变样式，进行平铺
  background: repeating-linear-gradient(30deg, red 0, black 40px);

案例: 进度条

三、径向渐变

• radial-gradient 径向渐变

  语法: 
    radial-gradient([<起点>]? [<形状> || <大小>]? <点>, <点>…);
  参数: 
     起点: 可以是关键字（left,top,right,bottom），具体数值或百分比
     形状: ellipse(圆形)、circle(椭圆形)
     大小: 具体数值或百分比，也可以是关键字
          半径为从圆心到最近端closest-side
          半径为从圆心到最近角closest-corner
          半径为从圆心到最远端farthest-side
          半径为从圆心到最远角farthest-corner
          包含contain
          覆盖cover

  background: -webkit-radial-gradient(red, blue);
  background: -webkit-radial-gradient(100px 50px, circle ,red, blue);
  background: -webkit-radial-gradient(100px 50px, circle closest-side,red, blue);
  background: -webkit-radial-gradient(100px 50px, 50px 20px,red, blue);

四、背景

• 多背景

  // 用逗号隔开
  background: url(qq.png) no-repeat 10px 30px, url(bt.png) no-repeat right top ;

• 背景尺寸

  语法: background-size:x y

  background-size: 100% 100%;  // 背景和盒子大小一致
  background-size: 30px 30px;
  background-size:40px 40px, 20px 20px;  // 对多张背景大小进行设置

• 背景原点

  语法: 
    background-origin: border-box/padding-box/content-box
    - border-box: 从border区域开始显示背景
    - padding-box: 从padding区域开始显示背景
    - content-box: 从content区域开始显示背景

• 背景剪切

  语法:   
    background-clip: border-box/padding-box/content-box/no-clip
    - border-box： 从border区域向外裁剪背景
    - padding-box： 从padding区域向外裁剪背景 
    - content-box： 从content区域向外裁剪背景 
    - no-clip： 从border区域向外裁剪背景

背景以文本内容进行剪切
-webkit-background-clip: text;
color: rgba(0,0,0,0);

五、遮罩

• -webkit-mask-image: 图片地址

• -webkit-mask-position: 图片位置

• -webkit-mask-repeat: 平铺方式

  // 和背景图设置类似
  -webkit-mask: url(mask.png) no-repeat left bottom;

作者：EndEvent
链接：https://www.jianshu.com/p/7ea2d4469c73