Bạn đang xem : gradient đường ngang css

CSS

Gradients

Nền Gradient

Các gradient CSS cho phép bạn hiển thị các chuyển đổi mượt mà giữa hai hoặc nhiều màu được chỉ định.

CSS xác định ba loại chuyển màu:

  • Gradients tuyến tính (đi xuống / lên / trái / phải / chéo)
  • Gradients Radial (được xác định bởi trung tâm của chúng)
  • Gradients Conic (xoay quanh một điểm chính giữa)

CSS Linear Gradients

Để tạo một gradient tuyến tính, bạn phải xác định
ít nhất hai điểm dừng màu. Điểm dừng màu là những màu bạn muốn tạo ra các chuyển tiếp mượt mà
giữa. Bạn cũng có thể đặt điểm bắt đầu và hướng (hoặc góc) dọc theo
với hiệu ứng gradient.

Cú pháp

background-image: linear-gradient (hướng, color-stop1, color-stop2, …);

Hướng – Từ trên xuống dưới (đây là mặc định)

Ví dụ sau đây cho thấy một gradient tuyến tính bắt đầu ở trên cùng. Nó bắt đầu màu đỏ, chuyển sang màu vàng:

từ trên xuống dưới (mặc định)

Hướng – Từ trái sang phải

Ví dụ sau đây cho thấy một gradient tuyến tính bắt đầu từ bên trái. Nó bắt đầu màu đỏ, chuyển sang
màu vàng:

trái sang phải

Ví dụ

#grad {
background-image: linear-gradient (sang phải, đỏ, vàng);
}

Hãy tự mình thử »

Hướng – Đường chéo

Bạn có thể tạo độ dốc theo đường chéo bằng cách chỉ định cả vị trí bắt đầu theo chiều ngang và chiều dọc.

Ví dụ sau đây cho thấy một gradient tuyến tính bắt đầu ở trên cùng bên trái (và
chuyển xuống dưới cùng bên phải). Nó bắt đầu màu đỏ, chuyển sang màu vàng:

Xem Thêm  Tạo nên cơ sở dữ liệu - xây dựng cơ sở dữ liệu trong python

trên cùng bên trái xuống dưới cùng bên phải

Ví dụ

#grad {
background-image: linear-gradient (ở dưới cùng bên phải, màu đỏ, màu vàng);
}

Hãy tự mình thử »

Sử dụng Angles

Nếu bạn muốn kiểm soát nhiều hơn hướng của gradient,
bạn có thể xác định một góc, thay vì các hướng được xác định trước (đến dưới cùng, tới
trên cùng, sang phải, sang trái, dưới cùng bên phải, v.v.). Giá trị 0deg tương đương với
“lên đầu”. Giá trị 90deg tương đương với “to right”. Một giá trị của
180deg tương đương với “to bottom”.

Cú pháp

background-image: linear-gradient (angle, color-stop1, color-stop2);

Ví dụ sau đây cho thấy cách sử dụng các góc trên các gradient tuyến tính:

180deg

Sử dụng nhiều điểm dừng màu

Ví dụ sau đây cho thấy một gradient tuyến tính (từ trên xuống dưới) với
nhiều màu dừng:

Ví dụ sau đây cho thấy cách tạo một gradient tuyến tính (từ trái sang
phải) với màu sắc của cầu vồng và một số dòng chữ:

Nền cầu vồng

Sử dụng tính minh bạch

Các gradient CSS cũng hỗ trợ độ trong suốt, có thể được sử dụng để tạo hiệu ứng mờ dần.

Để thêm độ trong suốt, chúng tôi sử dụng hàm rgba () để xác định các điểm dừng màu.
Tham số cuối cùng trong hàm rgba () có thể là một giá trị từ 0 đến 1 và nó
xác định độ trong suốt của màu: 0 cho biết độ trong suốt hoàn toàn, 1
biểu thị màu đầy đủ (không trong suốt).

Xem Thêm  Mảng Python với các ví dụ - cách truy cập các phần tử mảng trong python

Ví dụ sau đây cho thấy một gradient tuyến tính bắt đầu từ bên trái. Nó bắt đầu trong suốt hoàn toàn, chuyển sang toàn màu đỏ:

Lặp lại một gradient tuyến tính

Hàm lặp lại tuyến tính-gradient () được sử dụng để lặp lại độ dốc tuyến tính:

Ví dụ

Một gradient tuyến tính lặp lại:

#grad {
background-image:
lặp lại-tuyến tính-gradient (đỏ, vàng 10%, xanh lục 20%);
}

Hãy tự mình thử »


Xem thêm những thông tin liên quan đến chủ đề gradient đường ngang css

Giải tích 1: C4-B : Đạo hàm theo hướng và vector gradient

  • Tác giả: Le Van
  • Ngày đăng: 2020-08-20
  • Đánh giá: 4 ⭐ ( 7601 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nhóm thứ 3-5

CSS Gradient — Generator, Maker, and Background

  • Tác giả: cssgradient.io
  • Đánh giá: 3 ⭐ ( 8056 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.

CSS: Tạo hiệu ứng Gradient Background siêu đẹp với Gradient-animator

  • Tác giả: thangdangblog.com
  • Đánh giá: 4 ⭐ ( 3821 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

CSS Gradient

  • Tác giả: www.elib.vn
  • Đánh giá: 3 ⭐ ( 9095 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

đường ngang và cách thích hợp để viết mã trong html, css

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 3639 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding:…
Xem Thêm  10 trình phát âm thanh HTML5 tốt nhất - trình phát âm thanh trang web

Gradients trong CSS

  • Tác giả: websitehcm.com
  • Đánh giá: 5 ⭐ ( 5455 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Gradients trong CSS w3seo hướng dẫn cơ bản đến nâng cao sử dụng gradient color trong CSS, các thuộc tính gradient Color css

42 CSS Gradients that look stunning

  • Tác giả: baseline.is
  • Đánh giá: 5 ⭐ ( 4311 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS gradient backgrounds for your project. A collection of 42 stunning gradients that you can easily copy-paste to your project.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php