从零开始学 Web之CSS3（二）颜色模式，文字阴影，盒模型，边框圆角，边框阴影

大家好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新……

github：https://github.com/Daotin/Web

博客园:http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

一、颜色模式

颜色模式有两种：

RGBA

HSLA（颜色(0~360)，饱和度(0%~100%)，明度(0%~100%)，透明度(0~1)）

红橙黄绿青蓝紫红：颜色从 0~360 顺序，各占30度。比如红色为0，黄色为120，绿色为240。

明度默认是50%,一般建议保留50的值，如果加到100后，变成白色，降到0后为黑色。

注意：

1、RGBA和HSLA中的透明度不会影响子元素的透明度，不具继承性；

2、opacity 会影响子元素的透明度，子元素会继承父元素的透明度。

3、transparent 不可调节透明度，始终完全透明。（）

二、文字阴影

语法：

：X方向偏移度

：Y方向偏移度

：阴影的模糊度

：阴影颜色

示例：

结果：

三、盒模型

1、在默认情况下，CSS 设置的盒子宽度仅仅是内容区的宽度，而非盒子的宽度。同样，高度类似。真正盒子的宽度（在页面呈现出来的宽度）和高度，需要加上一些其它的属性。例如：

= 盒子的宽度

= 盒子的高度

很明显，这不直观，很容易出错，造成网页中其它元素的错位。

2、CSS3中可以通过 来指定盒模型，即可指定为，这样我们计算盒子大小的方式就发生了改变。

：对象的实际宽度等于设置的 width 值和 border、padding 之和。（盒子实际的宽度 = 设置的 width + padding + border）

： 对象的实际宽度就等于设置的width值，即使定义有 border 和 padding 也不会改变对象的实际宽度。（盒子实际的宽度 = 设置的 width），相应的盒子的内容的宽度或高度区间会变小。

3、浏览器的兼容性

IE8 及以上版本支持该属性，Firefox 需要加上浏览器厂商前缀 ，对于低版本的 IOS 和 Android 浏览器也需要加上

四、边框圆角

使用 属性来设置圆角。

五、边框阴影

语法：

：水平方向的偏移值（必填）

：垂直方向的偏移值（必填）

：模糊度--可选，默认0 （必填）

：阴影的尺寸，扩展和收缩阴影的大小--可选 默认0

：颜色--可选，默认黑色

：内阴影--可选,默认是外阴影

当然，box-shadow 和 text-shadow 一样，也是可以添加多个的，之间用逗号隔开。

欢迎关注

Web前端之巅

念念不忘，必有回响。