CSS3

重要的八个模块

• 选择器
• 盒模型
• 背景&边框
• 文字特效
• 2D/3D转换
• 动画
• 多列布局
• 用户界面

1. 边框

• 圆角：border-radius
• 阴影：box-shadow
  box-shadow: h-shadow v-shadow blur spread color inset;
  
  

  Paste_Image.png
• 边界：border-image
  border-image: source slice width outset repeat;
  
  

  Paste_Image.png

2. 背景

• background-size
• background-clip 绘制区域
• background-origin定位区域
  背景图像的位置区域(border-box,padding-box,content-box)

3. 渐变Gradients

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
  background: （repeating-）linear-gradient(direction（可选、left top、100 deg）, color-stop1（可以用rgba）, color-stop2, ...);

  
  
  

  Paste_Image.png

• 径向渐变（Radial Gradients） 由它们的中心定义
  background: （repeating-）radial-gradient(circle,red 5%, green 15%, blue 60%);设置了形状 circle/ellipse

4. 文本效果

• text-shadow:h-shadow v-shadow blur color;
• text-overflow:clip/ellipsis/string
  当文本溢出时修剪/显示省略号代替被修剪的/使用给定字符串代替被修剪的 文本
• word-break: normal|break-all|keep-all;
  规定非中日韩文本的换行规则
• word-wrap:normal|break-word;
  允许长的内容可以自动换行

5.z-index

6.媒体查询

Paste_Image.png

Paste_Image.png

7.min/max-width/height

8. nav-down/up/index/left/right: auto|id|target-name|inherit;opera only
   规定当使用 nav-down 导航键时，向何处进行导航。

9. opacity

10. order 属性规定一个灵活的项目相对于同一容器内其他灵活项目的顺序。

11. outline:outline-color, outline-style, outline-width
    绘制于元素周围(在border外)的一条线，位于边框边缘的外围，可起到突出元素的作用。和boder的区别：不是元素尺寸的一部分
    outline-offset设置轮廓框架在 border 边缘外的偏移

12. overflow