您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > css样式 >

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

    时间:2013-12-26 09:07 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印

    运行代码保存代码复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
    • 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线性渐变 垂直和水平渐变linear-gradient由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/csstx/6533.html
    标签:网站源码