1、边框
1）边框圆角
单个圆角：水平半径，垂直半径
border-top-left-radius:60px 120px;//左上
border-bottom-left-radius:60px 120px;//左下
复合写法：水平半径/垂直半径
border-radius:60px 90px 90px 90px/px px px px;
border-radius:30px 40px 50px 60px;
赋值规律： 从左上开始，顺时针赋值，如果这个角没有值，去对角；
border-radius: 40px/60px;
四个角半径都相同是简写：border-radius:60px; 或者50%
最好使用%
2）边框阴影
box-shadow:水平位移，垂直位移，模糊程度，阴影大小，阴影颜色 。
inset内阴影 外阴影不需要写
3）边框图片
border-img-source:url("");
图片边框的裁剪：border-image-slice:27 27 27 27;不需要单位
border-image-slice: 裁剪
border-image-width: 边框宽度
border-image-repeat: 边框图片的平铺
repeat: 图片显示不完整
round: 图片平铺 优化了，图片会完整显示
stretch: 拉伸
2、背景
1）尺寸
控制背景的大小：水平。垂直
background-size:100px 100px;
可以是数值或者百分比；
或者是cover覆盖（完全覆盖盒子，不保证完全显示）全屏背景自适应
contain包含（保证背景图片最大化在图片中等比例显示，不保证铺满盒子。）
2）原点
background-origin:padding-box; 从内边距开始
background-origin:border-box; 从边框开始
background-origin:content-box; 从内容开始
3）背景裁剪
backgorund-clip:border-box;
从border-box开始裁剪，超出border-box的要裁剪。
4）多背景
按照背景语法格式书写，多个背景使用语法隔开
border-img-source:url("") no-repeat left top/right top/right bottom/left bottom/center;
3、渐变
1）线性渐变 gradient变化
background-image;linear-gradient(to right,yellow,green);方向，起始颜色，终止颜色
to right:从左到右
方向可以写角度：45deg，原点为左下角
多种颜色：
background-image;linear-gradient(to right,yellow 0%,red 30%,green 100%);
突变
background-image;linear-gradient(45deg,
yellow 0%,
yellow 25%,
red 25%,
red100%); //从0到25%是黄色，25到100是红色
2）径向渐变
background-image;radial-gradient(200px at left top,yellow,green);辐射范围 中心点位置，起始颜色，终止颜色
中心点可以表示为 at 50px 50px,at left right center bottom top,100px at center
background-image;radial-gradient(100px at center,
yellow 0%,
green 30%,
red 60%,
blue100%); //颜色从圆心开始扩张改变
球体：
background-image;radial-gradient(200px at 80px 80px,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.6) );
4、过渡
过渡属性 持续时间 运动曲线 延迟时间
运动曲线：linear(匀速) ease-in (加速) ease减速 ease-out减速 ease-in-out先加速后减速
transition:width 2s.backgorund-color 2s;
如果多个过渡的特性是一样，可以简写： transition：all 2s linear 1s；
5、2d变换 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。transform 位移
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
1) 移动 translate(x, y) 可以改变元素的位置，x、y可为负值；
x 在水平方向移动。向左是负
y 在垂直方向移动。向下是正
transform:translate(-100px,500px) rotate(7deg);
改变旋转中心：transform-origin:center bootm;下面中心点，也可以写像素，水平，垂直，默认是 图片几何中心