关于CSS3线型渐变这些事儿

CSS3兼容各浏览器的线型渐变方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta charset="utf-8">
<title>线性渐变（linear-gradient）</title> 
<style type="text/css"> 
.gradient{ 
background: #000000; 
background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff)); 
background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%); 
background: -o-linear-gradient(top, #000000 0%,#ffffff 100%); 
background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%); 
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); 
} 
:root .gradient{filter:none;}   
</style> 
</head> 
<body> 
<div class="gradient"> 
垂直渐变 
</div> 

</body> 
</html>

如下图所示：

 

兼容IE哟~~

posted @ 2016-06-28 15:05  夏小夏吖  阅读(218)  评论(0)  编辑  收藏  举报