CSS3径向渐变都要加上浏览器内核,保证兼容吗?

CSS3径向渐变都要加上浏览器内核,保证兼容吗?

<!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>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕慕子 2020-02-18 16:52:40

同学你好, 对于存在兼容性问题的属性都需要加上前缀。

同学刚开始学习感觉有点混乱这是正常现象, 同学不用纠结,在考虑兼容性时加上即可。

如果帮助到了你,欢迎采纳,祝学习愉快~

好帮手慕慕子 2020-02-18 16:00:09

同学你好,代码是正确的,效果实现的很棒,推荐都添加上,保证代码的兼容性。

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

  • 提问者 慕斯卡3605978 #1
    是没有兼容的都要加么?大概什么时候加啊?我有点混乱。
    2020-02-18 16:35:16
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师