CSS3

下图为CSS3知识框架，分支内容包括：选择器、盒模型、背景和边框、文字特效、布局、用户界面等。

CSS3

• 1.选择器
  • 属性选择器,例如：input[type="text"]{}
  • 伪类选择器(not,empty,first-child,last-child,nth-child(n),only-child,enabled和:disabled,checked,checked,::selection,:read-only和read-write,::before和::after)
• 2.盒模型
  • box-sizing:border-box(宽高包括padding和border)
  • content-box
• 3.背景和边框
  • 背景：background-image，background-size，background-origin，background-clip
  • 边框border-radius你可以给任何元素制作 "圆角"，box-shadow，border-image
• 4.文字特效
  • text-shadow，text-overflow，word-wrap，word-break
  • 字体@font-face
• 5.2D/3D转换
  • CSS3 转换可以对元素进行移动、缩放、转动、拉长scale、倾斜skew。
  • 过渡transition
• 6.动画 animation
  • 动画 animation @keyframes
• 7.布局
  • 多列布局column：可以将文本内容设计成像报纸一样的多列布局
  • 弹性盒子：Flex Box
• 8.用户界面
  • resize， box-sizing，outline-offset外形修饰
• 9.渐变Gradients
  • 可以让你在两个或多个指定的颜色之间显示平稳的过渡。
  • 分类：1.线性渐变- 向下/向上/向左/向右/对角方向；2.径向渐变- 由它们的中心定义
• 10多媒体查询
  • 媒体查询：@media screen and ()