二十一、CSS3圆角半径/多背景/背景尺寸

一、圆角

border-radius:40px;

水平半径|垂直半径

图1

图2

border-radius:40px 20px   50px  60px;
左上面圆角水平半径和垂直半径都是40px
右上面圆角水平半径和垂直半径都是20px
右下面圆角水平半径和垂直半径都是50px
左下面圆角水平半径和垂直半径都是60px

也可以下面这样

border-top-left-radius:40px 40px;
左上面圆角水平半径和垂直半径都是40px
border-top-right-radius:20px 20px;
右上面圆角水平半径和垂直半径都是20px
border-bottom-left-radius:50px 50px;
右下面圆角水平半径和垂直半径都是50px
border-bottom-right-radius:60px 60px;
左下面圆角水平半径和垂直半径都是60px

水平半径一垂直半径不一样如下：

border-top-left-radius:20px 40px;
左上面圆角水平半径是20px,垂直半径都是40px
border-top-right-radius:20px 35px;
右上面圆角水平半径是20px，垂直半径都是35px
border-bottom-left-radius:50px 30px;
右下面圆角水平半径是50px，垂直半径都是30px
border-bottom-right-radius:60px 40px;
左下面圆角水平半径是60px,垂直半径都是40px

案例代码

效果

图2

二、背景

多背景

 background:url(...) 120px 0px on-repeat,url(...) 120px 0px on-repeat;
有多个背景值用“,”号分开
background-size: 20% 20%,30% 30%;
设置多个背景的的大小,会按照background的顺序来.如果只有一个值，会把所有的背景都设置为同样大小

三、尺寸

background-size:
值：
1、具体的数值
2、百分比 : 盒子的占比
3、cover ：填滿整个盒子
4、contain ：尽量显示全部图片

一个值是等比缩放， 二个值如果比例不对会变形

四、RGBA说明：

五、背景裁切

background-clip:
border-box; 从边框开始显示背景
padding-box; 从padding开始显示背景
content-box; 从内容开始显示背景
text；从文本区划显示背景 需要rgba的配合

六、浏览器内核前缀

先了解:w3c组织
-webkit-transition:1s; chrome safari ...
-moz-transition:1s; 火狐
-ms-transition:1s; ie 360(极速webkit/安全版ms)
-o-transition:1s; opera
transititioan:1s; 等w3c标准样式

七、渐变

线形渐变
background:linear-gradient(90deg,red,yellow,#aabcc);
90deg:90度
“,”号后面可以无限写
background:linear-gradient(90deg top,red 120px,yellow 200px,#aabcc 100px);
径向渐变