css三实现ui,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;