一、圆角
- 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;
