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- 欧朋浏览器