CSS3基础知识总结

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;