CSS 渐变 linear-gradient

作者: Viewwei | 来源:发表于2021-11-02 09:36 被阅读0次

Css渐变gradients深入理解
CSS渐变
CSS3渐变
条纹背景
18、CSS渐变gradient
gradient(渐变)
CSS渐变之背景、边框、字体渐变
--- > css3-渐变
css3中比较好用的属性
css3的渐变.倒影.过渡.2D变形.

深入了解 linear-gradient 线性变化

linear-gradient 变化默认是从上到下的变换,如果需要其他方向的变换,则需要专门指定.渐变的方向有两种表示方法,一种使用关键字 to 表示方位,另外是直接使用角度值.关键字比较好理解,比如 top,bottom,left,right.但是角度相对来说理解起来有点难度,下面着重来讲解下角度在线性渐变的使用

线性角度是啥

线性角度指的是:以图形的中心点做水平方向的线段,再以中心点做出一条线,与水平线生成的角度叫做线性角度,线性角度线和图形最远的的距离叫做开始点,另外一端称为结束点

image.png

注意:在 linear-gradient 函数中,其中的百分比的说的是开始点到结束点的距离,而不是图形的百分比.如果后面的渐变断点的小于前面渐变断点的值,那么后面的渐变断点会按照前面渐变断点的位置开始计算.数值也是线性线段的数值.CSS 渐变无法实现过渡效果.

实例:关于线性角度和开始点结束点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .linear {
                width: 200px;
                height: 400px;
                border: 1px solid palegoldenrod;
                /* background: purple; */
                background-image: linear-gradient(45deg,white 100px,red 100px 200px,white 200px);
            }
        </style>
    </head>
    <body>
        <div class="linear"></div>
    </body>
</html>