Hướng dẫn can you make a gradient in css? - bạn có thể tạo một gradient trong css không?

Thử nó

Cú pháp

/* A gradient tilted 45 degrees,
   starting blue and finishing red */
linear-gradient(45deg, blue, red);

/* A gradient going from the bottom right to the top left corner,
   starting blue and finishing red */
linear-gradient(to left top, blue, red);

/* Color stop: A gradient going from the bottom to top,
   starting blue, turning green at 40% of its length,
   and finishing red */
linear-gradient(0deg, blue, green 40%, red);

/* Color hint: A gradient going from the left to right,
   starting red, getting to the midpoint color
   10% of the way across the length of the gradient,
   taking the rest of the 90% of the length to change to blue */
linear-gradient(.25turn, red, 10%, blue);

/* Multi-position color stop: A gradient tilted 45 degrees,
   with a red bottom-left half and a blue top-right half,
   with a hard line where the gradient changes from red to blue */
linear-gradient(45deg, red 0 50%, blue 50% 100%);

Giá trị

linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

Vị trí của điểm bắt đầu của đường dốc. Nếu được chỉ định, nó bao gồm từ

linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

linear-gradient(red 10%, 30%, blue 90%);

linear-gradient(red 10%, 30%, blue 90%);

Các giá trị

linear-gradient(red 10%, 30%, blue 90%);

linear-gradient(red 10%, 30%, blue 90%);

linear-gradient(red 10%, 30%, blue 90%);

linear-gradient(red 10%, 30%, blue 90%);

linear-gradient(red 10%, 30%, blue 90%);

linear-gradient(red 10%, 30%, blue 90%);

linear-gradient(red 10%, 30%, blue 90%);

linear-gradient(red 10%, 30%, blue 90%);

linear-gradient(red 40%, yellow 30%, blue 65%);

Góc hướng của đường dốc. Giá trị

linear-gradient(red 10%, 30%, blue 90%);

linear-gradient(red 10%, 30%, blue 90%);

linear-gradient(red 40%, yellow 30%, blue 65%);

Giá trị ____34 của một điểm dừng màu, theo sau là một hoặc hai vị trí dừng tùy chọn, (mỗi vị trí là

linear-gradient(red 40%, yellow 30%, blue 65%);

linear-gradient(red 40%, yellow 30%, blue 65%);

linear-gradient(red 40%, yellow 30%, blue 65%);

Một gợi ý nội suy xác định làm thế nào độ dốc tiến triển giữa các điểm dừng màu liền kề. Độ dài xác định tại điểm giữa hai màu dừng màu gradient sẽ đạt đến điểm giữa của chuyển đổi màu. Nếu bị bỏ qua, điểm giữa của chuyển đổi màu là điểm giữa giữa hai điểm dừng màu.

Lưu ý: Kết xuất các điểm dừng màu trong độ dốc CSS tuân theo các quy tắc tương tự như các điểm dừng màu trong độ dốc SVG. Rendering of color stops in CSS gradients follows the same rules as color stops in SVG gradients.

Cũng lưu ý rằng ví dụ đầu tiên ở trên không hiển thị chính xác như được mô tả trong Mozilla Firefox (đặc biệt là phiên bản 80.0b3). Bạn sẽ phải đặt thuộc tính Chiều cao HTML thành 100% hoặc 100VH để hiển thị như được mô tả.

Sự mô tả

Như với bất kỳ gradient nào, một gradient tuyến tính không có kích thước nội tại; tức là, nó không có kích thước tự nhiên hoặc ưa thích, cũng không phải là tỷ lệ ưa thích. Kích thước cụ thể của nó sẽ phù hợp với kích thước của phần tử mà nó áp dụng.

Để tạo một gradient tuyến tính lặp lại để lấp đầy thùng chứa của nó, hãy sử dụng chức năng

linear-gradient(red 40%, yellow 30%, blue 65%);

Bởi vì

linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);

linear-gradient(red 40%, yellow 30%, blue 65%);

Thành phần của một gradient tuyến tính

Một gradient tuyến tính được xác định bởi một trục, đường dốc và hai hoặc nhiều điểm dừng màu. Mỗi điểm trên trục là một màu riêng biệt; Để tạo ra một gradient mịn, hàm

linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

Đường gradient được xác định bởi tâm của hộp chứa hình ảnh gradient và theo một góc. Màu sắc của gradient được xác định bởi hai hoặc nhiều điểm: điểm bắt đầu, điểm kết thúc và, ở giữa, điểm dừng màu tùy chọn.

Điểm bắt đầu là vị trí trên đường gradient nơi màu đầu tiên bắt đầu. Điểm kết thúc là điểm mà màu cuối cùng kết thúc. Mỗi điểm trong hai điểm này được xác định bởi giao điểm của đường dốc với một đường vuông góc đi từ góc hộp nằm trong cùng một góc phần tư. Điểm kết thúc có thể được hiểu là điểm đối xứng của điểm bắt đầu. Những định nghĩa hơi phức tạp này dẫn đến một hiệu ứng thú vị đôi khi được gọi là các góc ma thuật: các góc gần nhất với các điểm bắt đầu và kết thúc có cùng màu với các điểm bắt đầu hoặc kết thúc tương ứng của chúng.

Tùy chỉnh độ dốc

Bằng cách thêm nhiều điểm dừng màu trên đường gradient, bạn có thể tạo một quá trình chuyển đổi tùy chỉnh cao giữa nhiều màu. Vị trí của một điểm dừng màu có thể được xác định rõ ràng bằng cách sử dụng

linear-gradient(red 40%, yellow 30%, blue 65%);

linear-gradient(red 40%, yellow 30%, blue 65%);

linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

Theo mặc định, màu chuyển tiếp trơn tru từ màu ở một màu dừng sang màu ở điểm dừng màu tiếp theo, với điểm giữa giữa các màu là một nửa điểm giữa quá trình chuyển đổi màu. Bạn có thể di chuyển điểm giữa này đến bất kỳ vị trí nào giữa hai điểm dừng màu bằng cách thêm một gợi ý % màu sắc không được dán nhãn giữa hai màu để cho biết nên ở giữa chuyển đổi màu. Ví dụ sau đây là màu đỏ rắn từ đầu đến mốc 10% và màu xanh rắn từ 90% đến cuối. Từ 10% đến 90%, các chuyển đổi màu từ đỏ sang xanh, tuy nhiên điểm giữa của quá trình chuyển đổi ở mức 30% thay vì 50% như đã xảy ra mà không có gợi ý màu 30%.

linear-gradient(red 10%, 30%, blue 90%);

Nếu hai hoặc nhiều điểm dừng màu ở cùng một vị trí, quá trình chuyển đổi sẽ là một đường cứng giữa màu đầu tiên và màu cuối cùng được khai báo tại vị trí đó.

Dừng màu nên được liệt kê theo thứ tự tăng dần. Các điểm dừng màu tiếp theo của giá trị thấp hơn sẽ ghi đè giá trị của màu trước đó dừng tạo chuyển đổi cứng. Những thay đổi sau đây từ đỏ sang vàng ở mốc 40%, và sau đó chuyển từ màu vàng sang màu xanh hơn 25% độ dốc

linear-gradient(red 40%, yellow 30%, blue 65%);

Dừng màu đa vị trí được cho phép. Một màu có thể được khai báo là hai điểm dừng màu liền kề bằng cách bao gồm cả hai vị trí trong khai báo CSS. Ba gradient sau là tương đương:

linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);

Theo mặc định, nếu không có màu với điểm dừng 0%, màu đầu tiên được khai báo sẽ ở điểm đó. Tương tự, màu cuối cùng sẽ tiếp tục đến mốc 100% hoặc ở mốc 100% nếu không có độ dài nào được khai báo về điểm dừng cuối cùng đó.

Cú pháp chính thức

 = 
  linear-gradient( [  | to  ]? ,  )  
 = 
  [ left | right ]  ||
  [ top | bottom ]
 = 
   , [ ? ,  ]#
 = 
                 &&
  ?
 = 
  
 = 
        |
  

Ví dụ

Gradient ở góc 45 độ

body {
  width: 100vw;
  height: 100vh;
}

body {
  background: linear-gradient(45deg, red, blue);
}

Độ dốc bắt đầu ở mức 60% của đường dốc

body {
  width: 100vw;
  height: 100vh;
}

body {
  background: linear-gradient(135deg, orange 60%, cyan);
}

Gradient với các điểm dừng màu đa vị trí

Ví dụ này sử dụng các điểm dừng màu đa vị trí, với các màu liền kề có cùng một giá trị dừng màu, tạo hiệu ứng sọc.

body {
  width: 100vw;
  height: 100vh;
}

linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

Ví dụ tốt hơn tuyến tính

Vui lòng xem sử dụng độ dốc CSS để biết thêm ví dụ.

Xem thêm