js样式之渐变线

<!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>

posted on 2017-09-22 17:11 miaoying 阅读(514) 评论(0) 编辑收藏举报