CSS3

CSS3系列知识，看完这篇就够了，无论是初学者还是准备参加考试的学生，这张脑图都将是你不可或缺的学习助手。

CSS3

• 边框
  • border-radius
    • 注：50%与100%效果相同
    • 方位：左上 右上 右下 左下
  • box-shadow
    • box-shadow: h-shadow v-shadow blur spread color inset
  • border-image
    • border-image: source slice width outset repeat|initial|inherit;
• 背景
  • background
  • background-image
  • background-size
    • length
      • 宽度：高度
      • 只给出一个值，另外一个值auto
    • percentage
      • 百分比，同上
    • cover
      • 保持图像纵横比覆盖定位区域最小大小
    • contain
      • 保持图像纵横比覆盖定位区域最大大小
  • background-origin
    • 指定background-position属性应该是相对位置
    • padding-box|border-box|content-box
  • background-clip
    • 背景裁剪
    • border-box|padding-box|content-box
• 渐变
  • 线性渐变
    • linear-gradient
      • background-image: linear-gradient(direction, color-stop1, color-stop2, ...)
        • direction
          • to right|to bottom right|to top...
          • 角度：0deg 从上到下
  • 径向渐变
    • radial-gradient
      • background-image: radial-gradient(shape size at position, start-color, ..., last-color)
        • shape
          • circle 圆形
          • ellipse 椭圆形
        • size
          • closest-side
          • fartherest-side
          • closest-corner
          • farthest-corner
• 文本效果
  • text-shadow
    • 文本阴影
  • box-sahdow
    • 盒子阴影
  • text-oveflow
    • 文字溢出
      • 配合以下两个属性使用： white-space:nowrap over-flow:hidden
      • clip
      • ellipsis
      • string
  • word-wrap
    • 文本换行
      • normal
      • break-word
  • word-break
    • 单词拆分换行
      • normal
      • break-all
      • keep-all
• 字体
  • @font-face
    • font-family
    • src
    • font-stretch
    • font-style
    • font-weight
• 过渡
  • transition
    • 必须要有添加的效果和持续时间
    • : property duration timing-function delay
  • transition-property
  • trandision-duration
  • transition-timing-function
    • : linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)
  • transition-delay
• 动画
  • @keyframes
    • 创建规则
    • from/to
    • 百分比
  • animation
    • 必须指定动画名称和动画时间
    • animation-name
    • animation-duration
    • animation-timing-function
      • 速度曲线
    • animation-fill-mode
    • animation-delay
    • animation-iteration-count
      • 播放次数
    • animation-direction
      • 下一周期是否逆向播放
    • animation-paly-state
      • 动画是否正在运行或暂停
• 多列
  • columns
    • width colum的简写
  • column-count
    • 列数
  • column-width
    • 列的宽度
  • column-gap
    • 列于列之间的间隙
  • column-rule
    • width style color的简写
  • column-rule-width
    • 两列的边框宽度
  • column-rule-style
    • 列于列之间的边框样式
  • column-rule-color
    • 两列的边框颜色
  • colum-span
    • 元素跨多少列
• 用户界面
  • resize
    • 元素是否由用户调整大小
    • none
    • both
    • horizontal
    • vertical
  • box-sizing
    • content-box
    • border-box
  • outline-offeset
    • 对轮廓outline进行偏移
• 图片
  • 缩略图
    • 给img标签添加border属性
  • 响应式图片
    • img { max-width: 100%; height: auto; }