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/

  • 相关阅读:
    Winform中怎样设置ContextMenuStrip右键菜单的选项ToolStripMenuItem添加照片
    JavaScript垃圾回收机制
    前端如何处理内存泄漏
    前端缓存
    深入理解vue-router之keep-alive
    (淘宝无限适配)手机端rem布局详解
    mysql不会使用索引,导致全表扫描情况
    MYSQL性能优化的最佳20+条经验
    深拷贝与浅拷贝的区别,实现深拷贝的几种方法
    vue组件通信方式总结
  • 原文地址:https://www.cnblogs.com/lsyw/p/10768777.html
Copyright © 2011-2022 走看看