显示不出来

唐某某 2017-02-08

源自：CSS3背景与渐变 3-19 编程练习

收起

3回答

vampire小奇 2017-02-17 14:36:27

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style type="text/css">
        div{
            width:200px;height:300px;
            float:left;
            margin:100px 0 0 100px;                                  
        }
        /*补充代码，分别写出4个元素的背景渐变效果*/
        .div1{
             background:-webkit-radial-gradient(60% 40%,closest-side circle,red,yellow,green,blue);
             background:-moz-radial-gradient(60% 40%,closest-side circle,red,yellow,green,blue);
             background:-o-radial-gradient(60% 40%,closest-side circle,red,yellow,green,blue);
             background:radial-gradient(60% 40%,closest-side circle,red,yellow,green,blue);
        }
        .div2{
             background:-webkit-radial-gradient(60% 40%,farthest-side circle,red,yellow,green,blue);
             background:-moz-radial-gradient(60% 40%,farthest-side circle,red,yellow,green,blue);
             background:-o-radial-gradient(60% 40%,farthest-side circle,red,yellow,green,blue);
             background:radial-gradient(60% 40%,farthest-side circle,red,yellow,green,blue);
        }
        .div3{
             background:-webkit-radial-gradient(60% 40%,closest-corner circle,red,yellow,green,blue);
             background:-moz-radial-gradient(60% 40%,closest-corner circle,red,yellow,green,blue);
             background:-o-radial-gradient(60% 40%,closest-corner circle,red,yellow,green,blue);
             background:radial-gradient(60% 40%,closest-corner circle,red,yellow,green,blue);
        }
        .div4{
             background:-webkit-radial-gradient(60% 40%,farthest-corner circle,red,yellow,green,blue);
             background:-moz-radial-gradient(60% 40%,farthest-corner circle,red,yellow,green,blue);
             background:-o-radial-gradient(60% 40%,farthest-corner circle,red,yellow,green,blue);
             background:radial-gradient(60% 40%,farthest-corner circle,red,yellow,green,blue);
        }
    </style>      
</head>
<body>
    <div class="div1"></div>  
    <div class="div2"></div>       
    <div class="div3"></div>  
    <div class="div4"></div>  
</body>
</html>

收起回答

rsrg 2017-02-09 10:39:26

div>.div1 是指div的子元素并不是其属性

改为div.div1 或直接写.div1

收起回答

JustDoItImooc #1

我的直接写.div1 显示不出来必须用div.div1

2017-02-12 11:12:17
JustDoItImooc #2

找到问题所在了尺寸在前形状在后就可以用 .div1 了 closest-side circle;

2017-02-12 11:17:32
JustDoItImooc #3

找到问题所在了尺寸在前形状在后就可以用 .div1 了 closest-side circle, 上一条写错了。

2017-02-12 11:18:40