CSS线性渐变垂直和水平渐变linear-gradient

2020-01-27 14:19:53

字体：大中小

来源：转载

供稿：网友

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>

上一篇：CSS3立体搜索框的实现

下一篇：CSS奇特用法：为IMG设置背景图片