Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> CSS

Cách sử dụng góc trên gradient tuyến tính với CSS

Sử dụng linear-gradient() để thêm góc cho gradient tuyến tính. Bạn có thể chạy mã sau để triển khai việc đặt góc 0, 90 và -90 độ:

Ví dụ

<!DOCTYPE html>
<html>
  <head>
    <style>
      #demo1 {
        height: 100px;
        background: linear-gradient(0deg, orange, blue);
      }
      #demo2 {
        height: 100px;
        background: linear-gradient(90deg, orange, blue);
      }
      #demo3 {
        height: 100px;
        background: linear-gradient(-90deg, orange, blue);
      }
    </style>
  </head>
  <body>
    <h2>Linear Gradients</h2>
    <div id="demo1">0 độ</div><br>
    <div id="demo2">90 độ</div><br>
    <div id="demo3">-90 độ</div>
  </body>
</html>