CSS3学习笔记（2）——颜色、阴影、盒模型、圆角边框

颜色模式

CSS3支持的颜色模式有2种，分别为

1. RGB

RGB色彩模式是工业界的一种颜色标准，是通过对红®、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。

CSS3在RGB的基础之上还支持设置透明度通道：
如rgba(0,0,0,0.5)，前三个参数分别代表红色(red)、绿色(green)、蓝色(blue)，取值范围为 0~255，对应十六进制00~FF，取值越大相应的颜色越明显。
第四个参数就是用来设置透明度的了，取值范围0~1，取值越大越不透明。

2. HSL(HSL)

HSL色彩模式是工业界的一种颜色标准，是通过对色相(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，HSL即是代表色相，饱和度，亮度三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是迄今运用最广的颜色系统之一。

用法类似于RGB

文件阴影

使用示例：

text-shadow: 2px 3px 2px #000  /*X-Offset, Y-Offset, Blur, Color */

参数从左到右依次是X-Offset（阴影的水平偏移距离，左负右正），Y-Offset（阴影的垂直偏移距离，上负下正），Blur（阴影模糊程度，数值越大越模糊），Color（阴影颜色，可使用rgba值）

* 可以使用多个阴影，用逗号隔开。

盒模型（box-sizing）

网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模式都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

CSS3可以通过box-sizing来指定盒模型，可选择content-box或者border-box:

• content-box：对象的实际宽度等于设置的width值和border、padding之和
• border-box：对象的实际宽度就等于设置的width值，已经包含了border和margin、padding的值，定义内外边距和边框也不会再撑大盒子的宽高，而是挤压内容。

边框圆角

/*添加边框圆角*/
/*设置一个值：四个角的圆角值一样*/
border-radius: 10px;
*/设置两个值：第一个值控制左上/右下，第二个值控制右上/左下*/
border-radius: 10px 30px;
*/设置三个值：第一个值控制左上，第二个值控制右上/左下，第三个值控制右下*/
border-radius: 10px 4px 60px;
/*设置四个值：左上 右上 右下 左上（从左上开始顺时针）*/
border-radius: 10px 30px 60px 100px

除了使用像素单位，还可以使用百分比，当圆角值为50%或height、width的一半时，圆角为正圆圆角。

添加 / 是用来设置当前的不同方向的半径值：例如

/*width方向上100px圆角，height方向上50px圆角
`border-radius: 100px/50px;

设置单个方向圆角的其它方式：

边框阴影

box-shadow: h v blur spread color inset;

h：水平方向的偏移值
v：垂直方向的偏移值
blur：模糊程度–可选，默认0
spread：阴影的尺寸，扩展和收缩阴影大小–可选，默认0
color：颜色–可选，默认黑色
inset：内阴影–可选，默认是外阴影