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/

  • 相关阅读:
    全基因组关联分析学习资料(GWAS tutorial)
    GWAS研究可利用的数据库(20200424更新)
    本周最新文献速递20200614
    本周最新文献速递20200607
    甲基化数据QC: 使用甲基化数据推测SNP基因型(ewastools工具)
    文献速递20200531
    查找感兴趣的基因、基因组区域是否有调控元件的在线网页工具EpiRegio
    许嵩
    甲基化数据QC:使用甲基化数据计算样本间的相关性
    there is no package called 'GO.db'报错解决方案
  • 原文地址:https://www.cnblogs.com/lsyw/p/10768777.html
Copyright © 2011-2022 走看看