Ranh giới rất quan trọng trong thiết kế/phát triển trang web vì chúng có thể thu hút sự chú ý của người dùng hoặc tách biệt nội dung trên trang web. Bạn có thể sử dụng hàm băm đường viền nếu bạn muốn tất cả bốn đường viền của một phần tử HTML giống nhau.
Mặt khác, bạn cũng có thể sử dụng thuộc tính màu đường viền, kiểu đường viền và thuộc tính chiều rộng đường viền dài để làm cho mỗi đường viền trở nên khác biệt/duy nhất. Khi bạn muốn chỉ định màu đường viền, chúng tôi sẽ sử dụng màu đường viền, sử dụng độ rộng đường viền để xác định độ rộng đường viền và chỉ định xem đường viền sẽ là nét đứt, gấp đôi hay liền nét bằng cách sử dụng thuộc tính kiểu đường viền.
Bạn cũng có thể nhắm mục tiêu các đường viền riêng lẻ bằng các thuộc tính như border-block-start và border-top
Đường viền kép là khi hai đường thẳng song song bao quanh một phần tử HTML. Hai dòng được phân tách bằng một khoảng trắng có thể để trong suốt hoặc lấp đầy hình ảnh hoặc màu nền.
Ví dụ: chúng ta có thể có nút đăng ký/đăng nhập được bao quanh bởi đường viền kép.
Tại sao lại có đường viền kép?
- Tách biệt: Bạn có thể sử dụng đường viền kép để tăng khả năng đọc và khả năng quét của trang web bằng cách tách các thành phần HTML khác nhau. Ví dụ: bạn có thể sử dụng đường viền kép để phân tách các thành phần như đầu trang, nội dung và chân trang trên trang web.
- Thu hút trực quan: Bạn có thể sử dụng các màu khác nhau/tương phản trên đường viền kép để làm cho các phần tử khác nhau trở nên hấp dẫn hơn về mặt trực quan.
- Hiển thị thứ bậc: Bạn có thể phân biệt rõ ràng giữa các yếu tố quan trọng và ít quan trọng hơn trên một trang web có đường viền kép.
- Dễ dàng tùy chỉnh: bạn có thể tạo các thiết kế cá nhân và độc đáo với đường viền kép. Ví dụ: bạn có thể thay đổi màu sắc hoặc chiều rộng của mỗi dòng.
- Đánh dấu: Bằng cách sử dụng thuộc tính đường viền kép, bạn có thể thu hút sự chú ý đến các liên kết hoặc nút cụ thể trên trang web.
Bạn có thể sử dụng các cách sau để tạo đường viền kép trong CSS.
Sử dụng các thuộc tính theo kiểu viền
Thuộc tính border-style thiết lập kiểu cho bốn đường viền của phần tử. Trong trường hợp này, chúng tôi sử dụng từ khóa double để đặt kiểu. Khi chúng ta sử dụng từ khóa double, phần điền tự động sẽ được tạo giữa hai đường viền.
Với mục đích trình diễn, chúng tôi sẽ đặt chiều rộng đường viền thành 15px. Chúng tôi cũng sẽ chọn màu của đường viền là màu đỏ và biểu thị kiểu đường viền là đôi.
Mã 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" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2> Border Property</h2> </div> </body> </html>
Mã CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border-width: 15px;
border-color: red;
border-style: double;
}Đầu ra sẽ là:
Sử dụng hàm tuyến tính-gradient().
Hàm này đặt độ dốc tuyến tính làm hình nền. Kết quả là sự chuyển đổi dần dần giữa hai màu dọc theo một đường thẳng. Chúng ta sử dụng từ khóa to để đánh dấu điểm bắt đầu của đường gradient. Nếu không có thứ tự nào được chỉ định, mặc định là dưới cùng.
Đoạn mã sau cung cấp cho hộp của chúng ta chiều rộng đường viền là 7px. Sau đó, chúng ta có thể chỉ định một gradient tuyến tính trong thuộc tính nền của mỗi cạnh của hộp.
Mã 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" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>linear-gradient() function</h2> </div> </body> </html>
Mã CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 350px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 7px solid rgb(36, 85, 7);
background: linear-gradient(to top, #8f0404 7px, transparent 1px),
linear-gradient(to bottom, #8f0404 7px, transparent 1px),
linear-gradient(to left, #8f0404 7px, transparent 1px),
linear-gradient(to right, #8f0404 7px, transparent 1px);
}Đầu ra sẽ là:
Sử dụng thuộc tính phác thảo
Đường viền là một đường được vẽ bên ngoài ranh giới của một phần tử. Điều này đạt được hiệu ứng đường viền kép và chúng ta có thể sử dụng đường viền và đường viền đơn. Chúng ta cần sử dụng offset đường viền để thêm khoảng trắng giữa các thuộc tính đường viền và đường viền.
Mã 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" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Outline Property</h2> </div> </body> </html>
Mã CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 5px solid red;
outline: 5px solid blue;
outline-offset: -20px;
}Trang được hiển thị sẽ trông như thế này:
Sử dụng thuộc tính box-shadow
Thuộc tính box-shadow thêm hiệu ứng đổ bóng xung quanh khung của phần tử. Bạn có thể có nhiều bóng hộp được phân tách bằng dấu phẩy. Bắt đầu bằng cách đảm bảo cài đặt offset và độ mờ bằng 0, sau đó đặt bóng ở kích thước chính xác.
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" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Box Shadow Property</h2> </div> </body> </html>
Mã CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
box-shadow:
0 0 0 5px red,
0 0 0 10px green;
}Trang được hiển thị sẽ trông như thế này:
Sử dụng thuộc tính clip nền
Thuộc tính clip nền chỉ định khoảng cách nền sẽ mở rộng trong phần tử. Phần mở rộng có thể nằm trên hộp viền, hộp đệm hoặc hộp nội dung.
Mã 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" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Background-Clip Property</h2> </div> </body> </html>
Mã CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 7px solid rgb(36, 85, 7);
padding: 5px;
background-clip: content-box;
background-color: rgb(238, 152, 130);
}Trang được hiển thị sẽ trông như thế này:
Sử dụng các phần tử giả
Các phần tử giả, được biểu thị bằng bộ chọn ::trước và ::sau, cho phép các nhà thiết kế web tạo kiểu cho các phần của tài liệu HTML mà không cần thêm đánh dấu vào mã.
Chúng tôi có thể minh họa cách sử dụng các phần tử giả để tạo khung kép bằng mã này:
tài liệu 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" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>pseudo property</h2> </div> </body> </html>
CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 150px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
background-color: brown;
}
box{
background-color: rebeccapurple;
position: relative;
border: 8px solid red;
}
.box::before{
content: " ";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 8px solid green;
border-width: 6px;
border-color: green white green white;
width: 150px;
height: 100px;
}Trang được hiển thị sẽ trông như thế này:
Ví dụ thực tế về đường viền kép CSS
Thuộc tính CSS viền kép được sử dụng trên nhiều trang web. Bạn cần kết hợp thuộc tính double border với các thuộc tính CSS khác để tận dụng tối đa tính năng này. Dưới đây là hai ví dụ về cách hoạt động của đường viền kép;
Nút “Giỏ hàng” đang bật Amazon
Amazon là một trong những tên tuổi lớn nhất trong lĩnh vực thương mại điện tử. Nút giỏ hàng của nó có đường viền đôi CSS để tăng tính thẩm mỹ trực quan và khuyến khích người dùng hành động.
Đường viền kép xuất hiện khi người dùng di chuột qua nút “giỏ hàng”. Ranh giới cũng được hiển thị khi di chuột qua menu điều hướng Amazon.
Nút Mailchimp
Mailchimp là dịch vụ tiếp thị qua email cho phép người dùng tạo, khởi chạy và theo dõi các chiến dịch. Trang web của cô sử dụng hiệu ứng khung đôi trong nhiều phần khác nhau. Nút đăng ký và đăng nhập có viền kép nhằm “tạo” cảm giác cấp bách khi người dùng duyệt web.
Đường viền ở dưới cùng của các nút này dày lên khi người dùng di chuyển con trỏ qua chúng.
Các phương pháp hay nhất để sử dụng hiệu ứng viền đôi CSS
Thật dễ dàng để bị cuốn hút khi bạn sử dụng CSS kép. Mục tiêu cuối cùng là giúp người dùng dễ dàng điều hướng và làm nổi bật các khu vực chính trên trang web của bạn. Thực hiện theo các phương pháp hay nhất sau:
- Sử dụng kiểu nhất quán: Nếu bạn đang sử dụng đường viền đôi, hãy đảm bảo kiểu đó nhất quán trên tất cả các thành phần. Ví dụ: đường viền kép có thể được sử dụng trên các nút điều hướng, kêu gọi hành động và đăng ký/đăng nhập. Nếu có thể, hãy đảm bảo các mục có viền đôi có cùng màu sắc và độ dày lề.
- Đảm bảo các đường viền kép này hoạt động trên các thiết bị: Chúng ta đang sống trong một thế giới nơi mọi người duyệt web từ điện thoại thông minh, máy tính và máy tính bảng. Kiểm tra để đảm bảo rằng đường viền kép hiển thị như mong đợi trên các kích thước màn hình khác nhau.
- Sử dụng chúng một cách tiết kiệm: Bạn có thể bị cám dỗ lạm dụng một hiệu ứng CSS cụ thể khi lần đầu tiên bạn khám phá ra nó. Tuy nhiên, CSS kép phù hợp với các thành phần khác nhau trên một trang web. Chỉ sử dụng thuộc tính này ở những khu vực mà nó tăng thêm giá trị cho dự án.
Ứng dụng
Chúng tôi đã nêu bật các phương pháp chính mà bạn có thể sử dụng để tạo hộp đôi trong CSS. Cách tiếp cận bạn chọn sẽ phụ thuộc vào những gì bạn muốn đạt được với đường viền kép và sở thích của bạn. Bạn có thể chọn một hoặc kết hợp nhiều kiểu viền đôi trên cùng một trang.
Bạn có thể xem các tài nguyên CSS này để hiểu chi tiết về Cascading Style Sheets.
