CSS3之颜色模式、文本阴影、盒子模型、私有化前缀

颜色模式

CSS3中的两种颜色模式

• RGBA
  R:red (0~255)
  G:green (0~255)
  B:blue (0~255)
  A:alpha透明度 (0~1)
• HSLA
  H:色调 (0~360) 不同的颜色拥有不同的色调
  S:饱和度 (0%~100%) 值越大，颜色越鲜艳
  L:亮度 (0%~100%) 值越大，越接近白色
  A:alpha透明度 (0~1)

---

文本阴影

text-shadow:param1 param2 praram3 param4
param1:水平偏移距离，正值向右
param2:垂直偏移距离，正值向下
param3:模糊程度，用”px”为单位，值越大越模糊
param4：颜色

一个文本可以拥有多个文本阴影，用逗号隔开

---

盒子模型

CSS2中的盒子模型的特点

• 盒子宽度：padding+border+width
• 内容区域大小不变
• 整体大小改变

CSS3中的盒子模型

• content-box:内容盒子 相当于传统盒子
• padding-box:内边距盒子
• border-box:外边距盒子

box-sizing:content-box/padding-box/border-box

如果已经设置好一个盒子的宽度width

• box-sizing设置为content-box,添加border或者padding,
  盒子宽度=width+padding+border
• box-sizing设置为border-box 添加border或者padding,
  盒子宽度=width
• box-sizing设置为padding-box 添加border或者padding,
  盒子宽度=width+border

---

私有化前缀

-webkit- 谷歌
-ms- IE浏览器
-moz- 火狐浏览器
-o- 欧朋浏览器