一、圆角
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
案例代码
<!DOCTYPE html>
<html>
<head>
<title>圆角</title>
<meta charset="utf-8">
</head>
<style type="text/css">
div{
width: 150px;
height: 150px;
margin:0px auto;
background: red;
border:1px solid red;
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*/
}
</style>
<body>
<div></div>
</body>
</html>
效果
图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);
径向渐变
