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/

  • 相关阅读:
    Hibernate学习一----------Hibernate初实现
    Error executing DDL via JDBC Statement
    org.hibernate.MappingException:Unknown entity
    Struts2学习九----------处理结果类型(input)
    触发器-MySQL
    Struts2学习八----------接收参数
    Struts2学习七----------Struts2后缀
    Struts2学习六----------默认Action
    Struts2学习五----------指定多个配置文件
    Java 8 表示两个时间点距离
  • 原文地址:https://www.cnblogs.com/lsyw/p/10768777.html
Copyright © 2011-2022 走看看