css3上下左右渐变效果,很酷,很强大

css3上下左右渐变效果,很酷,很强大



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 渐变</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); /* 标准语法*/
        }


        #grad2{
            height: 200px;
            background: -webkit-linear-gradient(left,red,blue); /* Safari 5.1-6.0 */
            background: -o-linear-gradient(right,red,blue); /* Opera 11.1-12.0 */
            background: -moz-linear-gradient(right,red,blue);/* Firefox 3.6-15 */
            background: linear-gradient(to right,red,blue); /* 标准语法 */
        }

        #grad3{
            height: 200px;
            background: -webkit-linear-gradient(left top,red,blue); /* Safari 5.1-6.0 */
            background: -o-linear-gradient(bottom right,red,blue); /* Opera 11.1-12.0 */
            background: -moz-linear-gradient(bottom right,red,blue); /* Firefox 3.6-15 */
            background: linear-gradient(to bottom right,red,blue); /* 标准语法 */
        }

        #grad4{
            height: 200px;
            background: -webkit-linear-gradient(0deg,red,blue); /* Safari 5.1-6.0 */
            background: -o-linear-gradient(0deg,red,blue);  /* Opera 11.1 -12.0 */
            background: -moz-linear-gradient(0deg,red,blue); /* Firefox 3.6-15 */
            background: linear-gradient(0deg,red,blue);  /* 标准语法 必须放到最后 */
        }

        #grad5{
            height: 200px;
            background: -webkit-linear-gradient(90deg,red,blue); /* Safari 5.1-6.0 */
            background: -o-linear-gradient(90deg,red,blue); /* Opera 11.1-12.0 */
            background: -moz-linear-gradient(90deg,red,blue); /* Firefox 3.6-15 */
            background: linear-gradient(90deg,red,blue); /* 标准语法 必须放到最后 */
        }

        #grad6{
            height: 200px;
            background: -webkit-linear-gradient(180deg,red,blue); /* Safari 5.1-6.0 */
            background: -o-linear-gradient(180deg,red,blue); /* Opera 11.1-12.0 */
            background: -moz-linear-gradient(180deg,red,blue); /* Firefox 3.6-15 */
            background: linear-gradient(180deg,red,blue); /* 标准语法 必须放到最后*/

        }

        #grad7{
            height: 200px;
            background: -webkit-linear-gradient(-90deg,red,blue); /* Safari 5.1-6.0 */
            background: -o-linear-gradient(-90deg,red,blue);  /* Opera 11.1-12.0 */
            background: -moz-linear-gradient(-90deg,red,blue); /* Firefox 3.6-15 */
            background: linear-gradient(-90deg,red,blue);  /* 标准语法 必须放到最后 */
        }

        #grad8{
            height: 200px;
            background: -webkit-linear-gradient(red,green,blue);
            background: -o-linear-gradient(red,green,blue);
            background: -moz-linear-gradient(red,green,blue);
            background: linear-gradient(red,green,blue);
        }

        #grad9{
            height: 200px;
            background: -webkit-linear-gradient(red,purple,green,yellow,blue,orange,violet);
            background: -o-linear-gradient(red,purple,green,yellow,blue,orange,violet);
            background: -moz-linear-gradient(red,purple,green,yellow,blue,orange,indianred);
            background: linear-gradient(red,purple,green,yellow,blue,orange,indianred);
        }

        #grad10{
            height: 200px;
            background: -webkit-linear-gradient(red 10%,green 85%, blue 90%);
            background: -o-linear-gradient(red 10%, green 85%, blue 90%);
            background: -moz-linear-gradient(red 10%,green 85%, blue 90%);
            background: linear-gradient(red 10%,green 85%, blue 90%);

        }

        #grad11{
            height: 100px;
            background: -webkit-linear-gradient(left,red,purple,orange,green,blue,indianred,yellow);
            background: -o-linear-gradient(left,red,purple,orange,green,blue,indianred,yellow);
            background: -moz-linear-gradient(left,red,purple,orange,green,blue,indianred,yellow);
            background: linear-gradient(to right,red,purple,orange,green,blue,indianred,yellow);
        }

        #grad12{
            height: 200px;
            background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
            background: -o-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
            background: -moz-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
            background: linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1));
        }

        #grad13{
            height: 200px;
            background: -webkit-repeating-linear-gradient(red,yellow 10%,green 30%);
            background: -o-repeating-linear-gradient(red,yellow 10%,green 30%);
            background: -moz-repeating-linear-gradient(red,yellow 10%,green 30%);
            background: repeating-linear-gradient(red,yellow 10%,green 30%);
        }


        /* 径向渐变 */

        #grad14{
            height: 150px;
            width: 200px;
            background: -webkit-radial-gradient(red,green,blue);
            background: -o-radial-gradient(red,green,blue);
            background: -moz-radial-gradient(red,green,blue);
            background: radial-gradient(red,green,blue);
        }

        #grad15{
            height: 150px;
            width: 200px;
            background: -webkit-radial-gradient(red 5%,green 15%,blue 60%);
            background: -o-radial-gradient(red 5%,green 15%,blue 60%);
            background: -moz-radial-gradient(red 5%,green 15%,blue 60%);
            background: radial-gradient(red 5%,green 15%,blue 60%);
        }

        #grad16{
            height: 150px;
            width: 200px;
            background: -webkit-radial-gradient(red,yellow,green);
            background: -o-radial-gradient(red,yellow,green);
            background: -moz-radial-gradient(red,yellow,green);
            background: radial-gradient(red,yellow,green);

        }

        #grad17{
            height: 150px;
            width: 200px;
            background: -webkit-radial-gradient(circle,red,yellow,green);
            background: -o-radial-gradient(circle,red,yellow,green);
            background: -moz-radial-gradient(circle,red,yellow,green);
            background: radial-gradient(circle,red,yellow,green);

        }

        #grad18{
            height: 150px;
            width: 150px;
            background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
            background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
            background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */
            background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* 标准的语法(必须放在最后) */;
        }

        #grad19 {
            height: 150px;
            width: 150px;
            background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
            background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
            background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */
            background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* 标准的语法(必须放在最后) */
        }

        #grad20 {
            height: 150px;
            width: 150px;
            background: -webkit-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
            background: -o-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
            background: -moz-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */
            background: radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* 标准的语法(必须放在最后) */
        }

        #grad21 {
            height: 150px;
            width: 150px;
            background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
            background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
            background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */
            background: radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* 标准的语法(必须放在最后) */
        }

        #grad22 {
            height: 150px;
            width: 200px;
            background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1 - 6.0 */
            background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6 - 12.0 */
            background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6 - 15 */
            background: repeating-radial-gradient(red, yellow 10%, green 15%); /* 标准的语法(必须放在最后) */
        }




    </style>
</head>
<body>
<h2>线性渐变 - 从上到下</h2>
<p>从顶部开始的线性渐变。起点是红色,慢慢过渡到蓝色</p>
<div id="grad1">

</div>
<p><strong>注意:</strong>Internet Explorer 9 及之前的版本不支持渐变</p>

<h2>线性渐变 - 从左到右</h2>
<p>从左边开始的线性渐变。起点是红色,慢慢过渡到蓝色:</p>

<div id="grad2"></div>

<p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

<h2>线性变化 - 对角</h2>

<p>从左上角开始(到右下角)的线性渐变。起点是红色,慢慢过渡到蓝色:</p>

<div id="grad3"></div>

<p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

<h2>线性渐变 - 使用不同的角度 </h2>
<div id="grad4" style="color: white;text-align: center">0deg</div> <br><br>
<div id="grad5" style="color: white;text-align: center">90deg</div> <br><br>
<div id="grad6" style="color: white;text-align: center">180deg</div> <br><br>
<div id="grad7" style="color: white;text-align: center">-90deg</div> <br><br>
<p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>


<h2>线性渐变 - 多个颜色点  </h2>
<h3>3个颜色节点 均匀分布</h3>
<div id="grad8"></div>
<h3>7个颜色节点 均匀分布</h3>
<div id="grad9"></div>
<h3>3个颜色节点 不均匀分布</h3>
<div id="grad10"></div>
<p><strong>注意:</strong> 当指定百分比时,颜色是不均匀分布。</p>
<p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

<h2>线性渐变 - 渐变背景</h2>
<div id="grad11" style="text-align: center;margin: auto;color: #888888;font-size: 50px">渐变背景</div>
<p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>


<h2>线性渐变 - 透明度</h2>
<p>
    为了添加透明度,我们使用 rgba() 函数来定义颜色结点。
    rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明。
</p>
<div id="grad12"></div>
<p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

<h2>重复的线性渐变</h2>
<div id="grad13"></div>
<p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

<br><br>

<h2>径向渐变 - 颜色结点均匀分布</h2>
<div id="grad14"></div>
<p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

<h2>径向渐变 - 颜色结点不均匀分布</h2>
<div id="grad15"></div>
<p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

<h2>径向渐变 - 形状</h2>
<p><strong>椭圆形 Ellipse(默认):</strong></p>
<div id="grad16"></div>

<p><strong>圆形 Circle:</strong></p>
<div id="grad17"></div>
<p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>


<h2>径向渐变 - 不同尺寸大小关键字的使用</h2>

<p><strong>closest-side:</strong></p>
<div id="grad18"></div>

<p><strong>farthest-side:</strong></p>
<div id="grad19"></div>

<p><strong>closest-corner:</strong></p>
<div id="grad20"></div>

<p><strong>farthest-corner(默认):</strong></p>
<div id="grad21"></div>


<h2>重复的径向渐变</h2>

<div id="grad22"></div>

<p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

我的其他原创文章:

    原文作者:阿酷tony
    原文地址: https://blog.csdn.net/ffffffff8/article/details/102894057
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞