CSS 图像高级径向渐变

径向渐变径向渐变使用 radial-gradient 函数语法。
这个语法和线性渐变很类似， 可以指定渐变结束时的形状 以及它的大小。
默认来说，结束形状是一个椭圆形并且和容器的大小比例保持一致。
下面代码演示径向渐变的用法：
<!DOCTYPE html>
<html>
    <head>
        <title>径向渐变</title>
        <style type="text/css">
            body{
                padding:20px;
            }
            div{color:#fff;}
            div.one{
                150px;
                height:150px;
                border:1px solid #000;
                background: radial-gradient(red, blue, rgb(30, 144, 255));  
            }
            div.two{
                150px;
                height:150px;
                border:1px solid #000;
                background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%);
            }   
            div.three{
                150px;
                height:150px;
                border:1px solid #000;
                background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px); 
            }
            div.four{
                150px;
                height:150px;
                border:1px solid #000;
                background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); 
            }           
        </style>
    </head>
    <body>
        <h1>软件开发，成就梦想</h1>
        <h2>学编程，上利永贞网 https://www.liyongzhen.com/</h2>
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
    </body>
</html>
 
工作中可以使用渐变生成工具，提高工作效率。
http://www.colorzilla.com/gradient-editor/
CSS 图像高级 径向渐变

径向渐变

CSS 图像高级径向渐变
