css使用线性渐变属性没有用是怎么回事

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css使用线性渐变属性没有用是怎么回事相关的知识,希望对你有一定的参考价值。

首先,blue和red之间要加个逗号,即
background:-moz-linear-gradient(top,blue,red);
其次,由于用了moz前缀,所以只有运行于火狐浏览器才有效。

如果想运行于webkit内核的浏览器(比如Chrome、Safari),则改为
background:-webkit-linear-gradient(top,blue,red);

至于IE(指低版本的),由于不支持css3,就只能用它本身的滤镜了。
参考技术A <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>linear-gradient/title>
<style>
div 
width: 200px;
height: 100px;
margin-top: 10px;
border: 1px solid #ddd;

.test 
background: linear-gradient(#fff, #333);

.test2 
background: linear-gradient(#000, #f00 50%, #090);

.test3 
background: linear-gradient(0deg, #000 20%, #f00 50%, #090 80%);

.test4 
background: linear-gradient(45deg, #000, #f00 50%, #090);

.test5 
background: linear-gradient(to top right, #000, #f00 50%, #090);

</style>
</head>
<body>
<div class="test"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
<div class="test5"></div>
</body>
</html>

具体用法参照:http://www.runoob.com/css3/css3-gradients.html

参考技术B 你背景颜色设了好几次

以上是关于css使用线性渐变属性没有用是怎么回事的主要内容,如果未能解决你的问题,请参考以下文章

CSS中的渐变——线性渐变

使用div+css实现背景颜色渐变,怎么实现呢?

css3渐变属性都有哪些

CSS3线性渐变

如何去除使用线性渐变属性时出现的条纹[重复]

如何去除使用线性渐变属性时出现的条纹[重复]