镜像渐变-radio-gradient

最新推荐文章于 2024-01-16 13:37:50 发布

weixin_30359021

最新推荐文章于 2024-01-16 13:37:50 发布

阅读量203

点赞数 1

CC 4.0 BY-SA版权

文章标签： xhtml

原文链接：http://www.cnblogs.com/xiaoleidiv/p/3425141.html

本文详细介绍并演示了CSS中的径向渐变属性的各种用法，包括不同形状、大小及位置的渐变效果，以及重复渐变的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2013年11月15日13:08:37

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        div {
        width:200px;
        height:100px;
        border:2px solid #000;
        float:left;
        margin-right:10px;
        margin-bottom:10px;
        }
        .box1 {
            background:-moz-radial-gradient(#cccc98,#cd3298,#98cb04);
            background:-webkit-radial-gradient(#cccc98,#cd3298,#98cb04);

        }
        .box2 {
            background:-moz-radial-gradient(#ff6766 5%,#fffe03 25%,#3199cc 50%);
            background:-webkit-radial-gradient(#ff6766 5%,#fffe03 25%,#3199cc 50%);
        }
        /*圆形circle渐变*/
        .box3 {
        background:-moz-radial-gradient(bottom left,circle,#ff6600,#ffff66,#009865);
        background:-webkit-radial-gradient(bottom left,circle,#ff6600,#ffff66,#009865)
        }
        /*椭圆形ellipse渐变*/
        .box4 {
            background:-moz-radial-gradient(left bottom,ellipse,#cb9998,#feff99,#666793);
        background:-webkit-radial-gradient(left bottom,ellipse,#cb9998,#feff99,#666793);
        }

            /*大小（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner,
                 farthest-side, farthest-corner, contain or cover)）*/
          /*没看懂start*/
          .box5 {
        background: -moz-radial-gradient(ellipse closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
background: -webkit-radial-gradient(ellipse closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
        }
        .box6 {
        background: -moz-radial-gradient(ellipse farthest-corner, #ace, #f96 10%, #1E90FF 50%, #f96);
background: -webkit-radial-gradient(ellipse farthest-corner, #ace, #f96 10%, #1E90FF 50%, #f96);
        }

        .box7 {
     background: -moz-radial-gradient(circle closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
background: -webkit-radial-gradient(circle closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
        }
        .box8 {
        background: -moz-radial-gradient(circle farthest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
background: -webkit-radial-gradient(circle farthest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
        }
        /*没看懂end*/

        .box9 {
             background:-moz-radial-gradient(#cc6733,#ffca97,#009997);
        background:-webkit-radial-gradient(#cc6733,#ffca97,#009997)
        }
        .box10 {
              background:-moz-radial-gradient(contain,#cc6733,#ffca97,#009997);
        background:-webkit-radial-gradient(contain,#cc6733,#ffca97,#009997)
        }
        /*下面这个实例应用的是Positioned, Sized，请看代码和效果*//*不懂啊*/
        .box11 {
        background: -moz-radial-gradient(80% 20%, closest-corner, #3199cc, #ff656b);
       background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#3199cc), to(#ff656b));
       background: -webkit-radial-gradient(80% 20%, closest-corner, #3199cc, #ff656b);
        }
        /*不懂重复渐变后面px定义的意思start*/
        .box12 {
    background:-moz-repeating-radial-gradient(#000,#000 5px,#ff0 5px,#ccc 10px);
    background:-webkit-repeating-radial-gradient(#000,#000 5px,#ff0 5px,#ccc 10px);
}
        .box13 {
        background:-moz-repeating-linear-gradient(left bottom,#000,#000 5px,#ff0 5px,#ccc 10px);
        background:-webkit-repeating-linear-gradient(left bottom,#000,#000 5px,#ff0 5px,#ccc 10px);
        }
/*不懂重复渐变后面px定义的意思end*/

    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5">closest-side最近端</div>
    <div class="box6">farthest-corner最远角</div>
    <div class="box7">closest-side</div>
    <div class="box8">farthest-side最远端</div>

    <div class="box9">正常</div>
    <div class="box10">contain包含</div>
     <div class="box11">下面这个实例应用的是Positioned, Sized</div>
    <div class="box12">重复渐变-moz-repeating-linear-gradient和-moz-repeating-radial-gradient</div>
    <div class="box13"></div>

</body>
</html>

转载于:https://www.cnblogs.com/xiaoleidiv/p/3425141.html