outline-offsetNieruchomość w CSS kompensuje zdefiniowanego konturu od elementu krawędzi obramowania o określoną kwotę. Kontur, który różni się od obramowania, nie zajmuje miejsca na stronie (podobnie jak element pozycjonowany absolutnie), więc kontur można przesunąć w dowolnej wielkości i nie wpłynie to na położenie ani układ otaczających elementów.
.example ( outline: solid 2px blue; outline-offset: 10px; )Kontury zdefiniowane za pomocą tej outlinewłaściwości są często używane jako pierścienie zaznaczenia, aby zapewnić dostępność. W ten sposób outline-offsetwłaściwość pozwala na zmianę położenia pierścienia ostrości.
Wartości
outline-offset akceptuje jeden rodzaj wartości, długość, która może być:
0(domyślny)- Dowolna inna poprawna długość z określoną jednostką (w tym wartości ujemne)
Zauważ, że outline-offsetpodobnie jak outline-widthnie akceptuje wartości procentowych.
Pozycjonowanie konspektu
Domyślnie kontur elementu jest rysowany bezpośrednio na zewnątrz obramowania (lub bezpośrednio na zewnątrz miejsca, w którym krawędź byłaby rysowana, gdyby obramowanie zostało zdefiniowane). Dlatego jest technicznie możliwe połączenie konturu i obramowania w celu uzyskania efektu dwóch granic:
Stamtąd outline-offsetmożna zmienić położenie konturu względem krawędzi obramowania. Wypróbuj poniższe demo, które umożliwia interaktywną zmianę wartości odsunięcia konturu za pomocą suwaka. Wartość przesunięcia jest wyświetlana na stronie podczas przesuwania suwaka:
Jak wspomniano powyżej, outline-offsetprzyjmuje wartości ujemne, co spowoduje przesunięcie konturu w przeciwnym kierunku (w kierunku środka elementu), jak pokazano w następnym interaktywnym demo. Zwróć uwagę, że zarys zaczyna się od -40 pikseli:
Jeśli obejrzysz powyższe demo w przeglądarce Firefox, zauważysz, że kontur wydaje się na początku poprawny, ale po wyregulowaniu suwaka kontur nie renderuje się płynnie i kończy się w niewłaściwej pozycji. Przewinięcie elementu poza widok, a następnie z powrotem do widoku, zmusza przeglądarkę do przemalowania konturu w prawidłowej pozycji. Wydaje się, że jest to błąd występujący tylko w przeglądarce Firefox.
Nie jest częścią outlinestenografii
Podobne do bordernieruchomości, outlinenieruchomość jest skrótem, który reprezentuje trzy właściwości: outline-color, outline-style, i outline-width.
W outline-offsetzwiązku z tym właściwość nie jest reprezentowana w tej ani w żadnej innej właściwości skróconej, dlatego należy ją zadeklarować oddzielnie od samego zdefiniowanego konturu.
Związane z
- zarys
- granica
Więcej informacji
- przesunięcie konturu na W3C
Wsparcie przeglądarki
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 4 | 2 | 11 | 15 | 3.1 |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Wskaźnik „częściowy” dla IE oznacza, że IE nie obsługuje outline-offset, ale obsługuje outlineskrót i trzy właściwości, które reprezentuje.
Oprócz błędu wspomnianego powyżej w sekcji „Pozycjonowanie konspektu” w przeglądarce Firefox występuje błąd polegający na nieprawidłowym rysowaniu konturu, jeśli element ma element potomny, który przekracza granicę nadrzędną (np. Przy użyciu marginesów ujemnych lub pozycjonowania bezwzględnego) . Dlatego outline-offsetwartość będzie zależna od rozszerzonej granicy utworzonej przez przepełnione dziecko, a nie do oryginalnych granic elementu nadrzędnego. Aby lepiej to zrozumieć, zobacz ten CodePen, ten wątek Stack Overflow i ten raport o błędzie (kredyt dla czytelnika Matt'a Vanes'a za wysłanie tego błędu).