CSS3_线性渐变_径向渐变----背景

2021-10-21 13:46:30

渐变的本质：绘制一张背景图片，所以使用 background 或者 background-image

background 的诸多属性，渐变都是可以使用的（repeat，position）

百分比：把元素渐变方向的整体长度看成

线性渐变背景

使用：（至少三个参数，从第二个参数开始，都是颜色）
background-image: linear-gradient( 方向开始颜色结束颜色);

方向

默认值（从上到下）

background-image: linear-gradient(#000, #fff);

to right 到右

background-image: linear-gradient(to right, #000, #fff);
background-image: linear-gradient(to left, #000, #fff);
background-image: linear-gradient(to top, #000, #fff);
background-image: linear-gradient(to bottom, #000, #fff);

to right bottom 到右下角

background-image: linear-gradient(to right bottom, #000, #fff);
background-image: linear-gradient(to right top, #000, #fff);
background-image: linear-gradient(to left top, #000, #fff);
background-image: linear-gradient(to left bottom, #000, #fff);

角度 deg

background-image: linear-gradient(0deg, #000, #fff);
background-image: linear-gradient(90deg, #000, #fff);
background-image: linear-gradient(180deg, #000, #fff);
background-image: linear-gradient(270deg, #000, #fff);

background-image: linear-gradient(45deg, #000, #fff);
background-image: linear-gradient(135deg, #000, #fff);
background-image: linear-gradient(225deg, #000, #fff);
background-image: linear-gradient(315deg, #000, #fff);

background-image: linear-gradient(-45deg #000, #fff);
background-image: linear-gradient(-90deg #000, #fff);

颜色结点

background-image: linear-gradient(red %10， green 20%， blue 30%, yellow 40%);

/*
从 0% 到 10% 为 red
从 10% 到 20% 为 red 到 green 的渐变
从 20% 到 30% 为 green 到 blue 的渐变
从 30% 到 40% 为 blue 到 yellow 的渐变
从 40% 到  为 yellow 


最后一个颜色百分比不写，默认到 
个颜色百分比不写，默认 0%
*/

应用： 45 度红白格（马赛克地砖）
明确的颜色分割线（red 25%, white 25%）
多重渐变背景，以逗号隔开，适当位置设置透明颜色
- 123

重复的线性渐变 background-image: repeating-linear-gradient(45deg, red 0%, white 20%);

颜色结点，除了可以写百分值，还可以写一个具体的像素值。写像素值，必须写两个值：起始和结束。
- ```
background-image: repeating-linear-gradient(45deg, white 0px, white 10px, red 10px, red 20px;    // 发廊灯
```

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title></title>

        <style type="text/css">
            body {
                width: ;
                color: #000;
                background: #96b377;
                font: 14px Helvetica, Arial, sans-serif;
            }
            
            #outer_box {
                width: 100px;
                height: 300px;
                margin: 300px auto 0;
                
                overflow: hidden
            }
            
            #inner_box {
                width: 100px;
                height: 3000px;
                margin-top: -900px;
                
                background-image: repeating-linear-gradient(155deg, red 0px, red 20px, black 20px, black 40px);
            }
            
            #inner_box:hover {
                margin-top: 0px;
                transition: 9s;
            }
        </style>
    </head>
    
    <body>
        
        <div id="outer_box">
            <div id="inner_box">
            </div>
        </div>

    </body>
</html>

文字光斑动画
文字要设置透明 color: rgba(255, 255, 255, 0.3);
3

径向渐变背景 background-image: radia-gradient(形状尺寸, 开始颜色, 结束颜色);

从起点到终点，颜色从内向外渐变。

形状尺寸参数
circle 默认形状，圆形
当 width 相等 height 时，总是圆形
当 width ！= height 时，是椭圆

颜色结点
百分比，参照圆心到最远端的距离

尺寸大小
- closest-side circle 最近边
- farthest-side circle 最远边
- closest-corner 最近角
- farthest-corner 最远角

at 设置圆心
- background-image: radial-gradient(closest-corner circle at 50px 50px, olive, red);
- background-image: radial-gradient(closest-corner circle at 50px 50px, olive, red);

重复的径向渐变 background-image: repeating-radial-gradient(red 0%, olive 25%);
- background-image: repeating-radial-gradient(red 0%, olive 25%, blue 50%);

上一篇：html/css/javascrip 下一篇：CSS前端框架收集

网站建设

Css

CSS3_线性渐变_径向渐变----背景