样式属性对浏览器的兼容问题
来源：3-1 线性渐变、上下、左右、对角
慕粉1469424710
2020-07-01 11:28:31
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>linear-gradients</title>
<style>
div{
width:500px;
height:300px;
margin:0 auto;
/* background:-webkit-linear-gradient(left,red,yellow,blue); */
background:-moz-linear-gradient(right;red,yellow,blue);
background:-o-linear-gradient(right,red,yellow,blue);
/* background:linear-gradient(to right,#f00,#ff0,#00f); */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
上面这个例子中的渐变只有第一个和第四个有效果，使用的是360浏览器，第二个和第三个只能在其特定的浏览器下才会显示么？
3回答
-
好帮手慕久久
2020-07-01
同学你好，效果是略有不同，因为-webkit-linear-gradient这种兼容模式的写法与标准写法的渐变规则略有不同，所以我们在书写的时候，一般要将标准写法写在最后；对于该点，同学了解下即可，后面的课程中也讲到了它们的效果会不同。
祝学习愉快!
0 -
好帮手慕久久
2020-07-01
同学你好，是的，第二个和第三个样式中有浏览器兼容前缀“-moz-”和“-o-”，其中“-moz-”对应火狐浏览器，“-o- ”对应Opera浏览器，所以这两个样式在360上会没有效果；而第一个“-webkit- ”前缀是针对webkit内核的浏览器，比如谷歌；而第四个则是通用的写法。
另外第二个样式，符号写错了，如下：
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0 -
慕粉1469424710
提问者
2020-07-01
对角的渐变问题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>linear-gradients</title>
<style>
div{
width:300px;
height:200px;
margin:0 auto;
background:-webkit-linear-gradient(left top,red,yellow,blue);
/* background:linear-gradient(to right bottom,#f00,#ff0,#00f); */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
第一个的渐变和通用的渐变样式结果存在着差异
0
相似问题