Khi bạn đặt hình ảnh bên trong thẻ liên kết (giữa và), trình duyệt của khách truy cập theo mặc định sẽ vẽ một đường viền màu xanh lam rộng một pixel xung quanh hình ảnh. Ngoài thực tế là sự tùy tiện của trình duyệt làm tăng kích thước của yếu tố thiết kế này trên trang của bạn lên hai pixel theo chiều dọc và hai pixel theo chiều ngang, màu xanh lam có thể không phù hợp với bảng màu của thiết kế trang.
Hướng dẫn
Bước 1
Nếu bạn cần xóa đường viền khỏi một hoặc nhiều hình ảnh liên kết, bạn có thể thực hiện việc này bằng cách thêm thuộc tính đường viền có giá trị 0 vào thẻ của mỗi hình ảnh bạn cần. Ví dụ: Có thể đạt được hiệu ứng tương tự khi sử dụng thuộc tính style bằng cách đặt cùng một đường viền với giá trị 0 trong đó: Giá trị 0 (0px) trong biến thể này có thể được thay thế bằng giá trị "không" (không có dấu ngoặc kép).
Bước 2
Nếu bạn cần giải quyết vấn đề này một cách triệt để, tức là đối với tất cả các bức ảnh có liên kết trong toàn bộ tài liệu, thì tốt hơn là bạn nên làm theo cách khác. Không cần thêm thuộc tính tương ứng vào thẻ của từng hình ảnh riêng biệt, dễ dàng hơn khi viết quy tắc chung cho tất cả trong phần mô tả kiểu ở đầu tài liệu. Quy tắc CSS này sẽ giống như sau: a img {border: none;} Nó phải được đặt trong khối mô tả kiểu và bản thân khối này phải được đặt trước thẻ đóng tiêu đề trang:
a img {border: none;}
Bước 3
Không chỉ hình ảnh, mà cả các liên kết văn bản đơn giản trong một số loại trình duyệt cũng gặp vấn đề tương tự - nếu khách truy cập nhấp vào liên kết, một đường viền chấm chấm sẽ vẫn còn xung quanh nó. Để cứu trang của bạn khỏi lỗi thiết kế này, hãy thêm quy tắc liên kết sau vào mô tả kiểu:
a img {outline: none;}
