本站停止维护,已转移至laravel学习网;欢迎大家移步访问!

CSS之颜色直线渐变

关于css的颜色渐变不同的浏览器会有不同的渲染效果,所以每个浏览器的代码也就不同:

  1. IE系列浏览器

    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0000ff',endColorStr='#fafafa',gradientType='0');

    参数:startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直,为1时代表水平。

  2. Firefox

    background: -moz-linear-gradient(top, #0000ff, #fafafa);

    参数:top、bottom垂直,left、right水平 例如:top时从顶部由#0000ff到#fafafa渐变,bottom时从底部由#0000ff到#fafafa渐变。同理,left,right也一样。

  3. Opera

    这个和第二个几乎一样唯一的差别就是一个标签

    background: -o-linear-gradient(top,#0000ff, #fafafa);//同2

  4. webkit,如Chrome、Safari等

    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0000ff), to(#fafafa));

    参数:linear线性, x1 x2, x3 x4 x1与x3相同时垂直,x2与x4相同时水平 from表示起始颜色 to表示结束颜色。



下面贴代码:

<!DOCTYPE> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
.gradient{ 
    width:100%; 
    height:400px; 
    background:-moz-linear-gradient(top,#0000ff,#fafafa);/*火狐*/ 
    background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#0000ff), to(#fafafa));/*谷歌*/ 
    background: -o-linear-gradient(top,#0000ff, #fafafa); /*opera*/
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#0000ff', endColorstr='#fafafa'); /*IE*/ 
} 
</style> 
</head> 
<body> 
<div class="gradient"></div> 
</body> 
</html>

赶快把这段代码复制试试吧!

转载请注明 :一沙网络原文出处:http://bbs.earnp.com/article/103
问题交流群 :562864481
1
作者没有开启打赏
发布时间 :2016-08-19 22:34:00
分享

0 个评论

    还没有评论,感觉来抢沙发吧!

要回复文章请先登录注册