Hướng dẫn đầy đủ về Đường viền và Đường viền CSS

Đường viền và đường viền CSS là những công cụ có giá trị cho các nhà thiết kế web muốn tăng thêm sự tinh tế cho trang web. Chúng rất dễ sử dụng khi bạn biết chúng hoạt động như thế nào và đủ linh hoạt để đáp ứng nhiều nhu cầu khác nhau. Hãy xem các đường viền CSS để xem bạn nên bắt đầu từ đâu.

Sự khác biệt giữa Đường viền và Đường viền trong CSS là gì?

Đường viền và đường viền CSS tạo thành hai trong số các lớp bên ngoài của mô hình hộp CSS, nằm giữa đường viền và lề. Trong khi các thuộc tính này tương tự nhau, chúng có giá trị và mục đích khác nhau.

Đối với một, các phác thảo CSS nằm ngoài biên giới. Điều này có nghĩa là chúng có thể trùng lặp với nội dung bên ngoài phần tử mà bạn áp dụng chúng. Cùng với điều này, đường viền CSS thay đổi kích thước của một phần tử nhưng đường viền thì không.

Nếu bạn gặp khó khăn trong việc hình dung các kiểu đường viền và đường viền, bạn có thể sử dụng các công cụ phát triển của trình duyệt để gỡ lỗi chúng.

Giá trị thuộc tính được chia sẻ đường viền & đường viền CSS

Bất chấp sự khác biệt của chúng, các đường viền và đường viền CSS chia sẻ một số giá trị của chúng. Cách viết tắt mà bạn sử dụng cho mỗi cách cũng rất giống nhau.

Tốc ký CSS Border & Outline

Giống như các thuộc tính CSS phức tạp khác, cả đường viền và đường viền đều có sẵn tốc độ viết tắt. Cả hai thuộc tính này chia sẻ cùng một định dạng cho các tùy chọn tốc ký của chúng và nó trông giống như thế này.

border: width style color;
outline: width style color;

Điều này tạo ra các quy tắc trông giống như thế này khi chúng đang hoạt động. Tất nhiên, mặc dù, cách viết tắt này không bao gồm tất cả các giá trị có sẵn cho các thuộc tính này.

border: 10px solid blue;
outline: 20px solid red;

Các quy tắc phác thảo và đường viền CSS viết tắt này dẫn đến một đường viền mỏng màu xanh lam với đường viền dày màu đỏ.

Giống như các thuộc tính CSS viết tắt khác, bạn cũng có thể sử dụng các thuộc tính riêng lẻ để đạt được kết quả tương tự.

Chiều rộng đường viền & chiều rộng đường viền CSS

Chiều rộng đường viền và đường viền là các giá trị thuộc tính CSS tùy chọn đặt độ dày của đường viền và đường viền mà bạn sử dụng. Định dạng cho các thuộc tính này là giống nhau.

outline-width: 20px;
border-width: 10px;

Các đường viền cho phép các độ rộng riêng lẻ được đặt cho mỗi bên của phần tử, nhưng các đường viền thì không. Bạn có thể đọc thêm về điều này trong các phần sau.

Kiểu đường viền & kiểu đường viền CSS

Đường viền và đường viền CSS có nhiều kiểu khác nhau. Đường viền đặc là phổ biến nhất, nhưng bạn có thể sáng tạo với cách bạn sử dụng đường viền và đường viền.

border-style: solid;
outline-style: dotted;

Bạn có thể tìm thấy danh sách đầy đủ các kiểu đường viền và đường viền CSS khác nhau ở cuối bài viết này.

Màu đường viền CSS & màu đường viền

Giống như với các thuộc tính CSS dựa trên màu sắc khác, đường viền và đường viền chấp nhận tất cả các màu hợp pháp của CSS. Điều này bao gồm mã hex, mã RGB, màu tốc ký và hơn thế nữa.

border-color: blue;
outline-color: 

Bạn cũng có thể sử dụng gradient màu khi làm việc với các đường viền và đường viền CSS.

Giá trị thuộc tính đường viền CSS

Cùng với các giá trị tài sản được chia sẻ, đường viền và đường viền cũng có những giá trị độc đáo để khám phá. Đường viền CSS có hai thuộc tính độc đáo đáng để học hỏi.

Bán kính đường viền CSS

Thêm bán kính vào đường viền của một phần tử cung cấp cho bạn nhiều quyền kiểm soát đối với hình dạng của nó. Mỗi góc của phần tử có thể có bán kính khác nhau và thuộc tính này có thể được đặt ngay cả khi kiểu đường viền được đặt thành không.

border-radius: 20px;

Bạn có thể đặt một giá trị duy nhất để thay đổi bán kính của tất cả các góc.

Bạn cũng có thể chia các góc thành các nhóm trên cùng bên trái / dưới cùng bên phải và trên cùng bên phải / dưới cùng bên trái.

border-radius: 10px 20px;

Điều này giúp bạn dễ dàng tạo các hình dạng thú vị bằng các phần tử HTML của mình.

Cuối cùng, bạn có thể đặt mỗi góc để có bán kính riêng.

border-radius: 10px 20px 30px 40px;

Các giá trị này áp dụng theo chiều kim đồng hồ bắt đầu từ góc trên cùng bên trái.

Thuộc tính cạnh đường viền CSS

Không giống như đường viền, bạn có thể đặt mỗi cạnh của đường viền có một giá trị duy nhất cho nhiều thuộc tính của nó. Điều này làm cho nó có thể cung cấp cho mỗi cạnh của phần tử của bạn một chiều rộng khác nhau.

border-left-width: 10px;
border-right-width: 20px;
border-top-width: 30px;
border-bottom-width: 40px;

Bạn cũng có thể đặt các kiểu đường viền CSS độc lập cho mỗi bên của một phần tử.

border-left-style: solid;
border-right-style: dotted;
border-top-style: dashed;
border-bottom-style: double;

Và bạn có thể thay đổi màu của mỗi bên nếu bạn muốn.

border-left-style: blue;
border-right-style: 
border-top-style: 
border-bottom-style: rgb(0, 0, 255);

Các cạnh của đường viền CSS hoạt động với cách viết tắt thông thường để kết hợp như thế này.

border-left: 10px solid blue;
border-right: 20px dotted 
border-top: 30px dashed 
border-bottom: 40px double rgb(0, 0, 255);

Giá trị thuộc tính phác thảo CSS

Giống như các đường viền CSS, các đường viền có một thuộc tính duy nhất của riêng chúng; phác thảo-bù đắp.

CSS phác thảo-bù đắp

Thêm phần bù đắp vào đường viền sẽ tạo ra một khoảng trống giữa chính nó và phần tử chính. Phần bù này phải giống nhau cho mỗi bên của đường viền và thuộc tính chỉ chấp nhận một giá trị.

outline-offset: 10px;

Đây có thể là một cách gọn gàng để sử dụng đường viền thứ ba cho các phần tử phù hợp với màu nền của bạn.

Kiểu viền & đường viền CSS

Cả đường viền và đường viền đều cần một phong cách để hoạt động. Có mười kiểu có sẵn để lựa chọn, bao gồm cả các đường viền không hiển thị chút nào.

border-style: solid;
border-style: dotted;
border-style: dashed;
border-style: groove;
border-style: ridge;
border-style: double;
border-style: inset;
border-style: outset;
border-style: hidden;
border-style: none;

Đường viền có cùng kiểu với đường viền, chỉ với kiểu đường viền được đặt làm thuộc tính.

Cách sử dụng Đường viền & Đường viền CSS

Đường viền và đường viền là những công cụ thiết kế tuyệt vời cho người tạo trang web. Bạn có thể xác định giao diện trang web của mình bằng các thuộc tính CSS này, nhưng bạn sẽ cần phải sáng tạo.