Thuộc tính đường viền trong CSS cho phép các nhà thiết kế web chỉ định kiểu, chiều rộng và màu sắc của đường viền của một phần tử.
Trong CSS, độ dốc cho phép người thiết kế áp dụng sự chuyển tiếp mượt mà giữa hai hoặc nhiều màu. Chuyển màu có thể được sử dụng để tạo hiệu ứng hình ảnh như đổ bóng, trộn màu và kết cấu của các thành phần trên trang web.
Độ dốc đường viền là thuộc tính CSS cho phép nhà phát triển áp dụng độ chuyển màu cho đường viền của một phần tử.
Đường viền chuyển màu tạo hiệu ứng hình ảnh trong đó màu của đường viền thay đổi từ màu này sang màu khác.
Tại sao nên sử dụng đường viền gradient?
Độ dốc cạnh là một trong những tính năng tạo kiểu khác nhau được giới thiệu trong CSS3. Dưới đây là một số lý do tại sao bạn nên có tính năng này trong ứng dụng web tiếp theo của mình:
- Độ dốc đường viền rất linh hoạt: bạn có thể sử dụng đường viền chuyển màu để tạo các hiệu ứng phức tạp và phân lớp. Điều này khác với các đường viền màu đồng nhất, cứng nhắc. Do đó, đường viền chuyển màu rất hữu ích cho các bố cục hoặc hình dạng phức tạp đòi hỏi thiết kế trực quan tinh tế.
- Tạo sự hấp dẫn trực quan: Bằng cách sử dụng hiệu ứng đường viền chuyển màu, bạn có thể thêm hiệu ứng hình ảnh bắt mắt vào thiết kế của mình. Ví dụ: bạn có thể sử dụng độ tương phản màu đậm để thu hút sự chú ý đến một yếu tố cụ thể trên trang web của mình.
- Đảm bảo tích hợp liền mạch: Đường viền chuyển màu cho phép đường viền tích hợp liền mạch với nền của phần tử. Cách tiếp cận này sẽ làm cho trang web của bạn trông chắc chắn và gắn kết, thể hiện một thiết kế chu đáo.
Cách thêm Border gradient trong CSS
Trước khi chúng tôi chỉ cho bạn cách thêm dải màu đường viền, hãy minh họa cách thêm đường viền vào phần tử HTML.
Chúng ta có thể sử dụng mã này;
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> <title>Document</title> </head> <body> <div class="box contains-border"> How to add a Border illustrated!!! </div> </body> </html>
CSS
.box {
width: 400px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.contains-border {
border-color: rebeccapurple;
border-style: solid;
border-width: 5px;
}Trang được hiển thị sẽ trông như thế này:
Mặc dù đoạn code trên có viền nhưng nó không bắt mắt lắm vì nó trống rỗng. Chúng tôi chỉ có một đường viền Rebecca có kích thước màu tím đặc xung quanh div của chúng tôi. 5 điểm ảnh.
Chúng ta có thể làm cho đường viền của mình trở nên hấp dẫn bằng cách sử dụng độ chuyển màu của đường viền. Có nhiều cách tiếp cận khác nhau để thêm gradient ranh giới. Dưới đây là một số trong những cái chính:
Sử dụng các ranh giới chuyển màu (Gradient tuyến tính, gradient xuyên tâm, gradient hình nón)
Chúng tôi sẽ minh họa cách sử dụng Đường viền chuyển màu theo ba cách khác nhau:
Độ dốc tuyến tính
Dải màu chuyển sắc tuyến tính tạo ra sự chuyển tiếp mượt mà giữa hai hoặc nhiều màu trên một đường thẳng. Chúng ta có thể sử dụng đoạn mã sau để chứng minh:
HTML
<!DOCTYPE html> <html> <head> <title>Linear Gradient Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box linear-gradient"> Linear Gradient Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.linear-gradient {
border-style: solid;
border-width: 10px;
border-image: linear-gradient(45deg, rgb(143, 55, 0), rgb(66, 228, 250)) 1;
}Chúng ta đã chỉ định kiểu đường viền là nét liền, có nghĩa là đường viền xung quanh hộp của chúng ta là một đường liền nét. Chiều rộng của đường viền trong mã của chúng tôi là 10px.
Độ dốc tuyến tính bắt đầu từ rgb(143, 55, 0)” và kết thúc bằng “rgb(66, 228, 250)”. Chúng tôi cũng chỉ định một góc 45 độ. Chiều rộng lát ảnh viền được đặt thành “1”.
Trang được hiển thị sẽ trông như thế này:
Độ dốc xuyên tâm
Độ dốc xuyên tâm tạo ra độ dốc hình tròn tỏa ra từ điểm trung tâm, cho phép người dùng chuyển từ màu này sang màu khác trong thành phần trang web.
Chúng ta có thể minh họa cách thêm gradient xuyên tâm bằng mã này:
HTML
<!DOCTYPE html> <html> <head> <title>Radial Gradient Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box radial-gradient"> Radial Gradient Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.radial-gradient {
border-style: solid;
border-width: 5px;
border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;
}Chúng tôi đặt kiểu đường viền của phần tử thành liền khối. Chúng tôi cũng đã cung cấp cho đường viền của mình chiều rộng đường viền là 5px.
Độ dốc xuyên tâm bắt đầu bằng RGB màu xanh đậm (0,143,104) và kết thúc bằng màu vàng nhạt, ký hiệu là rgb(250,224,66).
“1ở cuối mã đại diện cho thuộc tính lặp lại hình ảnh đường viền. Giá trị này yêu cầu trình duyệt chỉ lặp lại hình ảnh đường viền một lần xung quanh đường viền của phần tử.
Trang được hiển thị sẽ trông như thế này:
Độ dốc hình nón
Một gradient hình nón tạo ra sự chuyển tiếp màu hình tròn. Trong hiệu ứng này, quá trình chuyển đổi bắt đầu từ điểm trung tâm và sau đó lan ra ngoài, tạo ra hiệu ứng hình tròn.
HTML
<!DOCTYPE html> <html> <head> <title>Conic Gradient Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box conic-gradient"> Conic Gradient Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.conic-gradient {
border-style: solid;
border-width: 7.5px;
border-image: conic-gradient(red, rgb(0, 255, 47), rgb(255, 60, 0), rgb(13, 255, 0), blue, rgb(0, 255, 4), rgb(255, 0, 38)) 1;
}Trong mã này, chúng tôi đặt kiểu đường viền thành liền khối và tạo chiều rộng cho đường viền 7,5 pixel. Thuộc tính border-image thiết lập độ dốc của đường viền. Có bảy màu bắt đầu từ màu đỏ và kết thúc bằng RGB (255, 038).
chữ số “1ở cuối mã có chiều rộng đường viền là 1 pixel.
Trang được hiển thị sẽ trông như thế này:
Sử dụng hình ảnh viền
Hình ảnh viền thay thế đường viền liền nét tiêu chuẩn cho các phần tử HTML. Hình ảnh viền được sử dụng để tạo ra các thiết kế phức tạp thay vì kết hợp màu sắc để tạo độ dốc viền.
HTML
<!DOCTYPE html> <html> <head> <title>Border Images Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box border-images"> Border Images Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.border-images {
border-style: solid;
border-width: 15px;
border-image-source: url(/images/elephant-2910293_1920.jpg);
border-image-slice: 60 30;
}Chúng tôi đã cung cấp cho thuộc tính chiều rộng đường viền của mình chiều rộng là 15px và đặt kiểu đường viền thành liền khối.
Border Image Slice đặt chiều rộng và chiều cao của hộp viền lần lượt là 60% và 30%.
Trang được hiển thị sẽ trông như thế này:
Sử dụng thuộc tính tốc ký
Thuộc tính tốc ký cho phép các nhà phát triển tạo kiểu cho nhiều thuộc tính CSS riêng lẻ bằng một dòng mã. Trong trường hợp này, chúng ta sử dụng hình ảnh viền để xác định nguồn của hình ảnh viền và lát cắt của hình ảnh viền.
HTML
<!DOCTYPE html> <html> <head> <title>Shorthand Property Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box shorthand"> Shorthand Property Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.shorthand {
border-style: solid;
border-width: 15px;
border-image: url(/images/elephant-2910293_1920.jpg) 60 30;
}Trang được hiển thị sẽ trông như thế này:
Trình tạo độ dốc đường viền CSS
Trình tạo đường viền gradient CSS giúp nhà phát triển thêm hiệu ứng chuyển màu cho các thành phần trên trang web. Những trình tạo này cho phép bạn tùy chỉnh cài đặt, nghĩa là bạn không phải tạo mọi thứ từ đầu. Dưới đây là một số công cụ bạn có thể sử dụng:
# 1. Trình tạo gradient CSS – chuyển đổi màu
Chuyển đổi màu cho phép bạn tạo mã CSS tuyến tính hoặc xuyên tâm với tối đa năm màu. Mã gradient CSS được tạo có thể được sử dụng làm hình nền hoặc đường viền của một phần tử.
Với trình tạo này, bạn có thể thực hiện những việc sau;
- Chọn tối đa năm màu và sử dụng chúng trong gradient đường viền.
- Chọn hướng của gradient. Công cụ này có độ dốc tuyến tính và xuyên tâm.
- Bạn có thể quyết định màu sẽ mờ như thế nào bằng cách sử dụng chức năng giữ màu.
Sau khi thử nghiệm và tạo mã xong, bạn có thể sao chép và sử dụng mã đó trên trang web của mình.
#2. Trình tạo gradient viền CSS – CSS không được sử dụng
Unused-CSS giúp các nhà phát triển tạo ra các ranh giới độ dốc mà họ có thể áp dụng cho các phần tử cấp khối mà không cần tạo các phần tử giả hoặc phần tử bổ sung.
Bạn có thể làm như sau;
- Chọn từ các loại gradient khác nhau. Khi làm việc với công cụ này, bạn có thể dễ dàng chuyển đổi giữa các gradient xuyên tâm và tuyến tính.
- Tab xem trước. Công cụ này cho phép bạn xem trước độ dốc đường viền sẽ trông như thế nào trên trang web của bạn sau khi tùy chỉnh nó.
- Màu dừng lại. Công cụ này giúp bạn dễ dàng quyết định cách thức hoạt động của quá trình chuyển đổi cho các màu khác nhau.
- Điều chỉnh kích thước của đường viền. Với công cụ này, bạn có thể dễ dàng điều chỉnh kích thước đường viền và bán kính đường viền.
Sau khi hài lòng với mã được tạo, bạn có thể sao chép và sử dụng mã đó trong dự án của mình.
#3. Trình tạo viền gradient – Amit Sheen
Công cụ này có tám vùng nền khác nhau, cho phép các nhà phát triển tạo hiệu ứng đường viền chuyển màu tròn.
Bạn có thể đạt được những điều sau;
- Tạo hình ảnh động chuyển màu. Công cụ này cho phép bạn tạo hoạt ảnh chuyển màu chuyển đổi giữa hai hoặc nhiều màu.
- Bạn có thể bao gồm mã JavaScript. Nếu thành phần có thể tùy chỉnh của bạn yêu cầu mã JS, bạn luôn có thể tìm và tùy chỉnh nó từ bảng điều khiển.
- Xem trực tiếp. Bạn có thể xem các thay đổi về mã khi bạn tùy chỉnh nó.
Bạn có thể sao chép và dán mã sau khi điều chỉnh hiệu ứng chuyển màu đường viền theo ý thích.
Ứng dụng
Khi thiết kế trang web, bạn có thể sử dụng bất kỳ phương pháp nào ở trên để thêm đường viền chuyển màu cho các thành phần của mình. Việc lựa chọn cách tiếp cận có thể khác nhau tùy thuộc vào sở thích, trình độ kỹ năng của bạn và tính chất của món đồ bạn đang tạo kiểu.
Bạn cũng có thể sử dụng các cách tiếp cận khác nhau cho các thành phần khác nhau trên cùng một trang web.
Hãy xem cách tạo đường viền kép trong CSS để cải thiện sự hấp dẫn trực quan của trang.
