• 技术文章 >web前端 >前端问答

    css怎么设置颜色渐变

    藏色散人藏色散人2021-04-08 19:57:51原创116

    css设置颜色渐变的方法:1、使用css3中的“Linear Gradients”属性实现颜色线性渐变;2、通过css3中的“Radial Gradients”属性实现颜色径向渐变。

    本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

    CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。

    CSS3 定义了两种类型的渐变(gradients):

    为了创建一个线性渐变,你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)。

    css设置线性渐变实例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title></title> 
    <style>
    #grad1 {
        height: 200px;
        background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
        background: linear-gradient(red, blue); /* 标准的语法(必须放在最后) */
    }
    </style>
    </head>
    <body>
    <h3>线性渐变 - 从上到下</h3>
    <p>从顶部开始的线性渐变。起点是红色,慢慢过渡到蓝色:</p>
    <div id="grad1"></div>
    <p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    </body>
    </html>

    效果图:

    e5afd3cf6f87f9de6534ed97ba52a7e.png

    相关推荐:《css3的颜色线性渐变属性:几种颜色之间的平稳过渡(附完整代码)

    以上就是css怎么设置颜色渐变的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css
    上一篇:css怎么实现隐藏并占位 下一篇:css怎么实现溢出隐藏
    第15期线上培训班

    相关文章推荐

    • CSS3线性渐变实现4圆环相连(代码实例)• css实现文字颜色渐变的几种方法• css径向渐变怎么用• 使用CSS实现圆角渐变边框

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网