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

请勿抄袭本页面

---

代码说明

CSS实现渐变特效，从此可以不用图片了。本特效代码演示了水平和垂直方向上的渐变效果，CSS技术关键点，filter:progid:DXImageTransform.Microsoft.Gradient的应用，默认的演示渐变颜色可根据你的需要改变。转自源码爱好者

---

html代码

<style type="text/css"> .test1{ width:100%; 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)); } </style> <div class="test1">CSS垂直渐变</div>

---

代码演示

---

html代码

<style type="text/css"> .test2{ width: 100%; 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> <div class="test2">CSS水平渐变</div>

---

代码演示

---

[代码仅供参考，转载请注明出处]

---