- CSS实现渐变特效，从此可以不用图片了。本特效代码演示了水平和垂直方向上的渐变效果，CSS技术关键点，filter:progid:DXImageTransform.Microsoft.Gradient的应用，默认的演示渐变颜色可根据你的需要改变。
-
<!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>
<title>CSS线性渐变</title>
<style type="text/css">
.test1{
width: 200px;
height: 80px;
text-align: center;
line-height: 80px;
margin-bottom: 10px;
color: White;
font-size: 20px;
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');
background: -moz-linear-gradient(top, #FF0000, #F9F900);
background: -o-linear-gradient(top,#FF0000, #F9F900);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900));
}
.test2{
width: 200px;
height: 80px;
text-align: center;
line-height: 80px;
margin-bottom: 10px;
color: White;
font-size: 20px;
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='1');
background: -moz-linear-gradient(left, #FF0000, #F9F900);
background: -o-linear-gradient(left,#FF0000, #F9F900);
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#FF0000), to(#F9F900));
}
</style>
</head>
<body>
<div class="test1">CSS垂直渐变</div>
<div class="test2">CSS水平渐变</div>
</body>
</html>
css样式下载排行
-
2014-04-28
-
2014-01-06
-
-
2014-01-06
-
2013-08-10
-
2012-08-14
-
2013-12-04
-
2013-08-15
最新文章
-
2016-05-31
-
2014-07-04
-
2014-07-04
-
2014-05-27
-
-
2014-04-28
-
2014-04-10
-
2014-03-31
相关内容推荐
热门源码
