文章目录
- 1.颜色
- 2.背景
- 3.渐变
- 4.盒子投影
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属性可以给元素添加阴影。
