zoukankan      html  css  js  c++  java
  • 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/

  • 相关阅读:
    11. MVC 开发模式 -- JSP篇
    10. JSTL格式化标签
    JQUREY 的 表单序列化 和 .$.getScript () 和 $.getJSON() 方法!
    jQery 与 AXAJ -- 书本进阶【主要讲解方法 详解】
    python少儿编程-turtle 基本绘图
    mysql按月进行表分区
    Mysql分区:分区键和唯一索引主键的关系
    Mysql自动按月分区
    MySQL分区表的正确使用方法
    sqoop定时增量导入
  • 原文地址:https://www.cnblogs.com/lsyw/p/10768777.html
Copyright © 2011-2022 走看看