渐变

一、渐变

- 渐变可以实现从一个颜色向其它颜色过渡，需要设置background-image

二、线性渐变（linear-gradient）

语法：

background-image: linear-gradient(位置, 颜色 位置, 颜色 位置...);

① 渐变的方向：

- to left

- to right

- to bottom

- to top

- deg （度数）

- turn （圈）

② 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况。

③ repeating-linear-gradient()：可以平铺的线性渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>线性渐变linear-gradient</title>
    <style>
        .box{
            width: 200px;
            height: 200px;

            /* background-image: linear-gradient(green, red); */
            /* background-image: linear-gradient(green 100px, red 150px); */
            /* background-image: linear-gradient(green 20%, red 60%); */
            /* background-image: repeating-linear-gradient(yellow 100px, red 150px); */

            /* 方向 */
            /* background-image: linear-gradient(to left, yellow, red); */
            /* background-image: linear-gradient(to right, yellow, red); */
            /* background-image: linear-gradient(to top, yellow, red); */
            /* deg 角度 */
            /* background-image: linear-gradient(50deg, yellow, red); */
            /* turn 圈 */
            background-image: linear-gradient(50turn, yellow, red);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

三、径向渐变（radial-gradient）

默认情况下，径向渐变的形状根据元素的形状来计算的

正方形 ——> 圆形

长方形 ——> 椭圆形

- 指定径向渐变的大小

circle（圆形）

ellipse（椭圆）

- 指定渐变位置

　　语法：　

radial-gradient(大小  at  位置,  颜色  位置,  颜色  位置...)

　　　大小：

　　　　　　circle：圆形

　　　　　　ellipse：椭圆

　　　　　　closest-side：近边

　　　　　　closest-corner：近角

　　　　　　farthest-side：远边

　　　　　　farthest-corner：远角　　

　　　　位置：

　　　　　　top、right、left、center、bottom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>径向渐变radial-gradient</title>
    <style>
        .box{
            width: 200px;
            height: 300px;

            /* background-image: radial-gradient(orange, skyblue); */
            /* 颜色的分布位置 */
            /* background-image: radial-gradient(orange 15%, rgba(0, 128, 0, 0.527) 35%, skyblue 75%); */
            /* 
                设置起始位置开始进行渐变:
                - 可以使用百分数、数值
                - 可以使用方位
            */
            /* background-image: radial-gradient(at 14% 25%, orange 15%, rgba(0, 128, 0, 0.527) 35%, skyblue 75%); */
            /* background-image: radial-gradient(at top, orange 15%, rgba(0, 128, 0, 0.527) 35%, skyblue 75%); */
            /* 
                使用大小：
                圆形径向渐变 
            */
            /* background-image: radial-gradient(circle, orange 15%, rgba(0, 128, 0, 0.527) 35%, skyblue 75%); */
            /* closest-side：近边 */
            /* background-image: radial-gradient(closest-side at 50px 100px, orange 15%, rgba(0, 128, 0, 0.527) 35%, skyblue 75%); */
            /* closest-corner：近角 */
            /* background-image: radial-gradient(closest-corner at 50px 100px, orange 15%, rgba(0, 128, 0, 0.527) 35%, skyblue 75%); */
            /* farthest-side：远边 */
            /* background-image: radial-gradient(farthest-side at 10px 100px, orange 15%, rgba(0, 128, 0, 0.527) 35%, skyblue 75%); */
            /* farthest-corner：远角 */
            background-image: radial-gradient(farthest-corner at 10px 100px, orange 15%, rgba(0, 128, 0, 0.527) 35%, skyblue 75%);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>