css linear-gradient

今天要介绍linear-gradient，线性渐层
创造出一个方块并在里面示范渐层，先看看效果如何

        .box1{
            background:linear-gradient(pink, yellow);
        }

这是最简洁的写法，让方块从上到下进行粉色到黄色的渐层
其他可以改变的属性有方向、角度、颜色比例，若没有特别设定就会如同上图的预设效果

方向

可以设定上、下、左、右、右上、右下、左上、左下八个方向，颜色会从反方向往设定方向渐层，语法示范如下

            background:linear-gradient(to top left,pink, yellow);

从右下角的粉红色往左上角的黄色渐层

角度

可以直接指定往某个角度渐层，从12点钟方向开始向顺时钟方向加上指定的角度

        .box1{
            background:linear-gradient(0deg,pink, yellow);
        }
        .box2{
            background:linear-gradient(45deg,pink, yellow);
        }
        .box3{
            background:linear-gradient(90deg,pink, yellow);
        }
        .box4{
            background:linear-gradient(240deg,pink, yellow);
        }

分别为0度、45度、90度、240度

颜色比例

box1为预设状态

        .box1{
            background:linear-gradient(pink 0%, yellow 100%);
        }
        .box2{
            background:linear-gradient(pink 20%, yellow 100%);
        }
        .box3{
            background:linear-gradient(pink 50%, yellow 100%);
        }
        .box4{
            background:linear-gradient(pink 80%, yellow 100%);
        }

渐层颜色变化的规则如下
假设为background:linear-gradient(pink 20%, yellow 80%);
先取前色数值20%，从顶端往下填满为粉色(蓝色实线框)

接下来取後者数值80%，从顶端往下，在超出纯色的地方进行渐层的过度(黑色虚线框)

最後用後者黄色填满剩下区域

以下实验了一些组合

        .box1{
            background:linear-gradient(pink 0%, yellow 100%);
        }
        .box2{
            background:linear-gradient(pink 0%, yellow 50%);
        }
        .box3{
            background:linear-gradient(pink 25%, yellow 75%);
        }
        .box4{
            background:linear-gradient(pink 0%, yellow 0%);
        }
        .box5{
            background:linear-gradient(pink 20%, yellow 20%);
        }
        .box6{
            background:linear-gradient(pink 50%, yellow 50%);
        }
        .box7{
            background:linear-gradient(pink 80%, yellow 20%);
        }
        .box8{
            background:linear-gradient(pink 100%, yellow 100%);
        }

BOX1 0%粉色区，100%过度区，为预设效果
BOX2 0%~50%为过度区，下半部分为纯黄色
BOX3 只有中间50%为过度区，上下25%皆为纯色
BOX4 粉色区为0%，过度区为0%，剩余用黄色填满
BOX5 20%粉色区域，20%过度区域，没有超过粉色区域，剩余用黄色填满
BOX6 如同前者，前後皆为50%，因此没有过度区
BOX7 80%粉色区域，20%过度区域，没有超过粉色区域，剩余用黄色填满
BOX8 100%粉色区域

许多人设定时只觉得两数值相加必须为100%，但是搞懂了数值设定的原理，配合角度设定，就能做出你理想的渐层