如果按任务提示要圆心为60% 40%，那么达不到要求的效果图要求

这是按50% 50%才达到效果图要求的样子

跳跃的鱼 2017-01-07

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

收起

3回答

小丸子爱吃菜 2017-01-07 20:06:39

我运行了你的代码，是没有问题的，就按照你这个去写就可以！

收起回答

qq_景象_0 #1

我也运行了这段代码一片空白把50%去掉才显示出来

2017-02-07 19:48:00

提问者跳跃的鱼 2017-01-07 19:31:28

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

收起回答

小丸子爱吃菜 2017-01-07 10:38:18

可以把代码贴出来，我这边运行看一下，图片看的不清楚！

祝学习愉快！

收起回答

提问者跳跃的鱼 #1

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

2017-01-07 19:30:34