js样式之渐变线

最新推荐文章于 2023-03-06 19:45:21 发布

weixin_30492047

最新推荐文章于 2023-03-06 19:45:21 发布

阅读量180

点赞数

原文链接：http://www.cnblogs.com/miaoying/p/7575900.html

版权

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>hi013z左右方向渐变</title>
  <style>
    .gradient {
      height: 200px;
      width: 100px;
      background: -webkit-linear-gradient(left, #FF8C69, #FFE7BA, #FFF8DC); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(right, #FF8C69, #FFE7BA, #FFF8DC); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(right, #FF8C69, #FFE7BA, #FFF8DC); /* Firefox 3.6 - 15 */
      background: linear-gradient(to right, #FF8C69, #FFE7BA, #FFF8DC); /* 标准的语法（必须放在最后） */
      height: 2px;
    }

    #body {
      background: black;
    }
  </style>

</head>
<body id="body">
<div class="gradient"></div>
</body>
</html>