CSS phác thảo không chỉ là một biên giới
Thuộc tính CSS outline là một thuộc tính khó hiểu. Khi bạn lần đầu tiên tìm hiểu về nó, thật khó để hiểu làm thế nào nó thậm chí từ xa khác nhau từ tài sản biên giới. W3C giải thích rằng có sự khác biệt sau đây:
- Đường viền không chiếm không gian.
- Đường viền có thể không phải hình chữ nhật.
Đường viền không chiếm không gian
Tuyên bố này, trong và của chính nó là khó hiểu. Làm thế nào một đối tượng trên trang web của bạn không chiếm không gian trên trang Web? Nhưng nếu bạn nghĩ rằng trang web của bạn giống như một hành tây, mỗi mục trên trang có thể được xếp lớp trên đầu trang của một mục khác. Thuộc tính phác thảo không chiếm không gian vì nó luôn được đặt ở trên cùng của hộp phần tử.
Khi một phác thảo được đặt xung quanh một phần tử, nó không có bất kỳ ảnh hưởng nào đến cách phần tử đó được trình bày trên trang. Nó không thay đổi kích thước hoặc vị trí của phần tử. Nếu bạn đặt đường viền trên một phần tử, nó sẽ chiếm cùng một không gian như thể bạn không có đường viền của phần tử đó. Điều này không đúng với đường viền. Đường viền trên phần tử được thêm vào chiều rộng và chiều cao bên ngoài của phần tử. Vì vậy, nếu bạn có hình ảnh rộng 50 pixel, với đường viền 2 pixel, nó sẽ chiếm 54 pixel (2 pixel cho mỗi đường viền bên). Hình ảnh tương tự với đường viền 2 pixel sẽ chỉ chiếm chiều rộng 50 pixel trên trang của bạn, đường viền sẽ hiển thị trên cạnh ngoài của hình ảnh.
Phác thảo có thể là hình chữ nhật không
Trước khi bạn bắt đầu suy nghĩ "mát mẻ, bây giờ tôi có thể vẽ vòng tròn!" Nghĩ lại. Tuyên bố này có ý nghĩa khác với bạn nghĩ. Khi bạn đặt đường viền trên một phần tử, trình duyệt sẽ diễn giải phần tử như thể đó là một hộp hình chữ nhật khổng lồ. Nếu hộp được chia thành nhiều dòng, trình duyệt chỉ để các cạnh mở vì hộp không được đóng. Nó giống như trình duyệt đang nhìn thấy đường viền với một màn hình vô cùng rộng - đủ rộng cho đường viền đó là một hình chữ nhật liên tục.
Ngược lại, thuộc tính phác thảo sẽ xem xét các cạnh. Nếu phần tử được phác thảo kéo dài nhiều dòng, đường viền sẽ đóng ở cuối dòng và mở lại trên dòng tiếp theo. Nếu có thể, đường viền cũng sẽ được kết nối hoàn toàn, tạo hình dạng không phải hình chữ nhật.
Sử dụng thuộc tính Outline
Một trong những cách sử dụng tốt nhất của thuộc tính phác thảo là làm nổi bật các cụm từ tìm kiếm. Nhiều trang web thực hiện việc này với màu nền, nhưng bạn cũng có thể sử dụng thuộc tính phác thảo và không phải lo lắng về việc thêm bất kỳ khoảng cách thừa nào trên các trang của mình.
Thuộc tính màu đường viền chấp nhận thuật ngữ "đảo ngược", làm cho màu đường viền là nghịch đảo của nền hiện tại. Điều này cho phép bạn làm nổi bật các yếu tố trên các trang Web động mà không cần biết màu nào được sử dụng .
Bạn cũng có thể sử dụng thuộc tính outline để loại bỏ đường chấm chấm xung quanh các liên kết đang hoạt động. Bài viết này từ CSS-Tricks cho thấy cách xóa đường viền chấm chấm.