Các outline-offsetbất động sản trong CSS offsets một phác thảo định nghĩa từ mép biên giới của một nguyên tố bằng một khoản tiền nhất định. Đường viền, khác với đường viền, không chiếm bất kỳ khoảng trống nào trên trang (giống như một phần tử được định vị tuyệt đối) vì vậy đường viền có thể được bù trừ với bất kỳ số lượng nào và nó sẽ không ảnh hưởng đến vị trí hoặc bố cục của các phần tử xung quanh.
.example ( outline: solid 2px blue; outline-offset: 10px; )Các đường viền được xác định bằng cách sử dụng thuộc outlinetính thường được sử dụng làm vòng lấy nét, để hỗ trợ tiếp cận. Do đó, thuộc outline-offsettính cho phép bạn thay đổi vị trí của vòng lấy nét.
Giá trị
outline-offset chấp nhận một loại giá trị, độ dài, có thể là:
0(mặc định)- Bất kỳ độ dài hợp lệ nào khác với một đơn vị được chỉ định (bao gồm cả giá trị âm)
Lưu ý rằng outline-offset, chẳng hạn như outline-width, không chấp nhận giá trị phần trăm.
Vị trí của phác thảo
Theo mặc định, đường viền của phần tử được vẽ ngay bên ngoài đường viền (hoặc ngay bên ngoài nơi đường viền sẽ được vẽ nếu đường viền được xác định). Do đó, về mặt kỹ thuật, có thể kết hợp đường viền và đường viền để có hiệu ứng hai đường viền:
Từ đó, outline-offsetcó thể được sử dụng để thay đổi vị trí của đường viền so với cạnh đường viền. Hãy thử bản trình diễn dưới đây cho phép bạn thay đổi tương tác giá trị bù đắp của đường viền bằng cách sử dụng thanh trượt. Giá trị của độ lệch được hiển thị trên trang khi bạn di chuyển thanh trượt:
Như đã đề cập ở trên, outline-offsetchấp nhận các giá trị âm, giá trị này sẽ bù đắp đường viền theo hướng ngược lại (về phía trung tâm của phần tử), như được hiển thị trong bản trình diễn tương tác tiếp theo. Lưu ý rằng đường viền bắt đầu ở -40px:
Nếu bạn xem bản trình diễn ở trên trong Firefox, ban đầu bạn sẽ nhận thấy đường viền xuất hiện chính xác nhưng khi thanh trượt được điều chỉnh, đường viền không hiển thị mượt mà và kết thúc ở vị trí sai. Cuộn phần tử ra khỏi chế độ xem, sau đó quay lại chế độ xem, buộc trình duyệt phải sơn lại đường viền ở đúng vị trí. Đây dường như là một lỗi chỉ dành cho Firefox.
Không thuộc về outlinetốc ký
Tương tự như các bordertài sản, outlinebất động sản là một cách viết tắt đại diện cho ba đặc tính: outline-color, outline-style, và outline-width.
Các outline-offsetbất động sản, do đó, không được đại diện trong này hoặc bất kỳ tài sản viết tắt khác, vì vậy nó cần phải được khai báo riêng rẽ với các phác thảo định nghĩa riêng của mình.
Có liên quan
- đề cương
- biên giới
Thêm thông tin
- outline-offset trên W3C
Hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 4 | 2 | 11 | 15 | 3.1 |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Chỉ báo "một phần" cho IE có nghĩa là IE không hỗ trợ outline-offset, nhưng có hỗ trợ tốc outlineký và ba thuộc tính mà nó đại diện.
Ngoài lỗi được đề cập ở trên trong phần “Định vị đường viền”, còn có một lỗi trong Firefox khiến đường viền được vẽ không chính xác nếu phần tử có phần tử con vượt qua ranh giới chính (ví dụ: sử dụng lề âm hoặc định vị tuyệt đối) . Do đó, outline-offsetgiá trị sẽ liên quan đến ranh giới mở rộng được tạo bởi con tràn, chứ không phải là ranh giới phần tử mẹ ban đầu. Để hiểu rõ hơn về vấn đề này, hãy xem CodePen này, chuỗi Stack Overflow này và báo cáo lỗi này (tín dụng cho người đọc Matt Vanes đã gửi về lỗi này).