1. 圆角 border-radius
单位可以为百分比或具体值（50%，5px）
1）border-radius:apx
当只有一个数值时，四个角的圆角均为apx
2)border-radius: apx bpx
当有两个数值时，上下圆角为 apx ,左右圆角为 bpx
3)border-radius: apx bpx cpx
当有三个数值时，上圆角为 apx ,下圆角为 bpx，左右圆角为 cpx
4）border-radius: apx bpx cpx dpx
当有四个数值时，圆角分别对应上，右，下，左
2. 阴影 box-shadow
box-shadow: 10px 10px 10px #000;
box-shadow: x轴方向 y轴方向 blur(模糊程度) 阴影颜色;
3. 渐变 linear-gradient
注：在background上使用,浏览器内核不同会有不同前缀
eg：background:-webkit-linear-gradient(-45deg,red,green);
background:-moz-linear-gradient(-45deg,red,green);
background:-o-linear-gradient(-45deg,red,green);
background:-ms-linear-gradient(-45deg,red,green);
基础版：background:linear-gradient(方向,颜色1,颜色2)
跳变：background:linear-gradient(方向,颜色1 apx , 颜色1 bpx , 颜色2 bpx)
径向渐变：-webkit-radial-gradient(left top,cirle,red 50px,blue 50px)
重复线性渐变：-webkit-repeating-linear-gradient
4. 倒影 box-reflect
-webkit-box-reflect : 位置 距离 渐变
-webkit-box-reflect: below 0px -webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1)
below：倒影在下面
above：倒影在上面
5. 蒙版（遮罩）-webkit-mask
eg：-webkit-mask:url("2.png") no-repeat;
1）位置
-webkit-mask-position: 100px 0 ;
6. 背景是从哪里开切的：background-clip
1）background-clip: content-box
2）background-clip: border-box;
3）background-clip:padding-box;
4）-webkit-background-clip:text; （抛光，保留文字轮廓）
7. 背景大小
background-size:50% 50%; (或者用 px）
contain：图片完整情况下最适应（图片完整情况下最大）
cover：布满（可能 部分图片不完整显示）
8. 多背景 ：
url("logo.png") no-repeat , url("logo1.gif") top right no-repeat
9.滤镜 -webkit-filter: blur(5px);
10.文字对齐方向
unicode-bidi: bidi-override;
direction: rtl;/ltr
11.单行省略
width:200px（一定要给宽度）
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;