程序员人生 网站导航

CSS的线性渐变样式

栏目:特效时间:2014-07-14 22:52:23
CSS如何设置线性渐变样式呢,当然呢,个人觉得还是不要这样设置,因为涉及到兼容性非常困在,常规做法是直接用ps画一个渐变图片,然后取一个像素款,到时候再设置背景y轴重复即可。
如果非要用纯CSS设置线性渐变样式怎么处理呢,代码如下:
  1. .wfuyu{  
  2. height: 50px;  
  3. background-color: #d5d5d5;  
  4. background-image: -webkit-linear-gradient(#000, #fff);/*Webkit*/ 
  5. background-image: -moz-linear-gradient(#000, #fff);  
  6. background-image: -ms-linear-gradient(#000, #fff);  
  7. background-image: -o-linear-gradient(#000, #fff);/*Opera*/ 
  8. filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#000, endColorstr=#fff);/*IE<9>*/ 
  9. }  
  10. </style>  
  11. <body>  
  12. <div class="wfuyu"></div> 

效果如下图
程序员人生

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐