CSS3 - 背景

---

一、渐变：background-image

渐变分为：

• 线性渐变：沿着某条直线朝一个方向产生渐变效果。

• 径向渐变：从一个中心点开始沿着四周产生渐变效果。

• 重复渐变。

线性渐变

格式：

background-image: linear-gradient(方向, 起始颜色, 终止颜色);

background-image: linear-gradient(to right, yellow, green);

举例

/* 语法：
    linear-gradient(方向，起始颜色，终止颜色);
    方向：to left   to right  to top   to bottom 　角度　30deg
    起始颜色
    终止颜色
*/
div:nth-child(1) {
    background-image: linear-gradient(to right, yellow, green);
}

/* 不写方向，表示默认的方向是：从上往下 */
div:nth-child(2) {
    background-image: linear-gradient(yellow, green);
}

/* 方向可以指定角度 */
div:nth-child(3) {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(135deg, yellow, green);
}

/* 0%的位置开始出现黄色，40%的位置开始出现红色的过度。70%的位置开始出现绿色的过度，100%的位置开始出现蓝色 */
div:nth-child(4) {
    background-image: linear-gradient(to right,
    yellow 0%,
    red 40%,
    green 70%,
    blue 100%);

}

径向渐变

格式：

background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色);
background-image: radial-gradient(100px at center,yellow ,green);

围绕中心点做渐变，半径是150px，从黄色到绿色做渐变。

二、clip-path：裁剪出元素的部分区域做展示

clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。
clip-path属性的好处是，即使做了任何裁剪，容器的占位大小是不变的