老师请检查，另外有几个问题

<!DOCTYPE html>

<html>

<head>

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);

}

.div2{

background:-webkit-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);

}

.div4{

background:-webkit-radial-gradient(60% 40%,farthest-corner circle ,red,yellow,green,blue);

}

</style>

</head>

<body>

</body>

</html>

这个属性为了兼容问题是四个都必须全部写上吗？我用的Chrome浏览器，只写了通用的格式它就出不来效果

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

收起

2回答

好帮手慕码回答被采纳获得+3积分 2020-02-26 19:02:35

同学你好，解答如下：

（1）如果实际中要使用的话，建议都写上；

（2）可能是因为不兼容中心点，所以添加上兼容前才可以显示；

（3）加不加中心点都是可以的，效果一致，建议把兼容前缀都添加上。

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

好帮手慕码 2020-02-26 18:42:18

同学你好，代码效果正确。另，请问四个属性是如下吗？

不需要全部写上，如果只在谷歌浏览器中测试的话，由于径向渐变需要添加前缀才可以正常显示，所以使用-webkit-radial-gradient即可。

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

提问者 Aurora_Meteor #1

那在实际工作中是只写一个还是都写上呢？

2020-02-26 18:47:04
提问者 Aurora_Meteor #2

老师还有这个问题： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>径向渐变</title> <style type="text/css"> div{ width: 400px; height: 400px; /*此处写代码*/ background:repeating-radial-gradient(red 0,orange 5%,yellow 10%,green 15%,cyan 20%,blue 25%,purple 30%); } </style> </head> <body> <div></div> </body> </html> 我这样只写颜色它可以显示出来，但是我再在前面加一个中心点的位置设置center它就无法显示了，然后我再在前面加一个-webkit-前缀它就又显示了，这是为什么呢？那到底还需不需要加上中心点呢？加的话前面的属性该写哪个呢？还是说直接4个都写上？

2020-02-26 18:48:14