css3【基础巩固】---- css3渐变

css3渐变.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3渐变</title>
    <style>
        .stage1{
            background:linear-gradient(65deg,red,rgba(85, 128, 214, 0.2) 60%, rgba(128, 77, 10, 0.8));
            width: 200px;
            height: 200px;
        }
        .stage2{
            height: 200px;
            width: 200px;
            background: -webkit-repeating-linear-gradient(90deg,red,blue 7%,green 10%); /* For Safari 5.1 to 6.0 */
            background: -o-repeating-linear-gradient(); /* For Opera 11.1 to 12.0 */
            background: -moz-repeating-linear-gradient(90deg,red,blue 7%,green 10%); /* For Firefox 3.6 to 15 */
            background: repeating-linear-gradient(90deg,yellow,rgb(122, 122, 185,.2) 50%,green 10%); /* 标准语法 (必须在最后) */
        }
        .stage3{
            height: 200px;
            width: 200px;
            box-shadow: rgb(122, 122, 185) 1px 10px 12px;
            background: repeating-linear-gradient(180deg,yellow,rgb(122, 122, 185,.4) 7%,green 30%); /* 标准语法 (必须在最后) */
        }
        .stage4{
            height: 200px;
            width: 200px;
            opacity: 0.5;
            background: repeating-linear-gradient(45deg,yellow,rgb(74, 74, 168,.2) 7%,green 10%); /* 标准语法 (必须在最后) */
        }
        .stage5{
            height: 200px;
            width: 200px;
            border-radius: 50%;
            background: radial-gradient(red 5%, rgba(133, 119, 150, 0.2) 15%,rgba(22,233,44,.5) 60%); /* 标准的语法 */
        }
        .stage6{
            height: 200px;
            width: 200px;
            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); /* 标准的语法（必须放在最后） */
        }
        .stage7{
            height: 200px;
            width: 200px;
            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); /* 标准的语法（必须放在最后） */
        }
        .stage8{
            height: 200px;
            width: 200px;
            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,rgb(226, 226, 191),black); /* Firefox 3.6 - 15 */
            background: radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* 标准的语法（必须放在最后） */
        }
        .stage9{
            height: 200px;
            width: 200px;
            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); /* 标准的语法（必须放在最后） */
        }
        .stage10{
            height: 200px;
            width: 200px;
            /* Safari 5.1 - 6.0 */
            background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
            /* Opera 11.6 - 12.0 */
            background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
            /* Firefox 3.6 - 15 */
            background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
            /* 标准的语法 */
            background: repeating-radial-gradient(red, yellow 10%, green 15%);
        }
        ol li{
            float: left;
            padding: 20px;
            list-style: none;
        }
    </style>
</head>
<body>
    <ol>
        <li>线性渐变
        <div class="stage1"></div>
        </li>
        <li>重复线性渐变1
        <div class="stage2"></div>
        </li>  
        <li>重复线性渐变2
            <div class="stage3"></div>
        </li>
        <li>重复线性渐变3
            <div class="stage4"></div>
        </li>
        <li>径向渐变1
            <div class="stage5"></div>
        </li>
        <li>径向渐变2  farthest-side
            <div class="stage6"></div>
        </li>
        <li>径向渐变3 closest-side
            <div class="stage7"></div>
        </li>
        <li>径向渐变4  closest-corner
            <div class="stage8"></div>
        </li>
        <li>径向渐变4 farthest-corner
            <div class="stage9"></div>
        </li>
        <li>重复的径向渐变
            <div class="stage10"></div>
        </li>
    </ol>
</body>
</html>
css3【基础巩固】---- css3渐变

猜你喜欢
