CSS权威指南（九）颜色、背景和渐变

1.颜色

CSS可以为任何元素设置前景色和背景色。一般来说，前景指元素的文本和元素四周的边框。

（1）前景色

   设置元素前景色的最基本方法是使用color属性。color属性会被继承。

（2）color属性对border的影响

   如果没有对border属性设置颜色，那么border将会被设置为color属性设置颜色。

2.背景

   默认情况下，背景区域从前景背后的空间一直延伸到边框的外边界。因此，内容框和内边距都在元素的背景中，而边框在背景之上绘制。通过CSS可以把元素的背景设置为纯色，也可以设为一个或多个图像，甚至还可以设为线性渐变吧或径向渐变。

（1）背景色

   背景色使用background-color属性声明。这个属性不会被继承。默认值是transparent。

（2）裁剪背景

   通常背景是一直延伸到边框的外边界的。但是可以通过background-clip属性控制背景的延伸位置，它有四个属性：border-box，padding-box，content-box，text。

• 对根元素html或body没有效果。
• 如果元素设置了圆角属性，实际的裁剪范围可能会缩小。
• 与background-repeat一起使用的时候可能会出现意料之外的效果
• 定义的裁剪区域对其他的背景属性没有影响
• text把背景裁剪到元素的文本线条。即，文本将使用背景填充，文本线条之外的背景是透明的。

（3）背景图

   使用background-image属性。

（4）背景定位

   使用background-position属性，可以指定背景图像的位置。

（5）改变图片的相对位置

   该属性的用意和background-clip的意义差不多，都是指定背景图片的生效位置。

（6）背景重复

   background-repeat;

（7）背景粘附

   使用background-attachment属性可以设置背景图片和文档一起滚动。

（8）背景图片的尺寸

   使用background-size属性。

3.渐变

（1）线性渐变

   线性渐变指沿线性向量填充得到的渐变。这个向量称为梯度线。

（2）渐变颜色

   渐变中的颜色值可以使用任意类型。

4.盒子投影

   使用box-shadow属性可以给元素添加阴影。