Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Offset konturu

Email Drukuj PDF

outline-offset

Dostępne wartości:

długość | inherit

Wartość domyślna:

0

Przykład:

div {outline-offset:1px;}

Dziedziczenie:

Nie

Obsługa:

Chrome, Safari, Mozilla Firefox, Opera

Korzystając z outline-offset, możemy kontrolować oddalenie konturu od zawartości formatowanego elementu. Nowy styl uzupełnia funkcje, które wprowadziła poprzednia specyfikacja CSS.

DIV

  {

  width:200px;

  height:200px;

  margin-left:3cm;

  outline:2px solid red;

  outline-offset:12px;

  }

Przykład działania omawianego stylu dostępny jest poniżej. Niestety użytkownicy Internet Explorera będą musieli zadowolić się rysunkiem 15.30, ponieważ ta przeglądarka nie obsługuje outline-offset.

<<przykład>>

<div class="przyklad">

<h3>Przykład bez outline-offset</h3>

<div style="width:200px;height:200px;margin-left:3cm;outline: 2px solid red;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum hendrerit risus, quis viverra est cursus quis. Donec eu nisi mauris, in laoreet diam. Nulla sit amet velit a metus tincidunt ullamcorper eu ut sem. Vivamus ipsum magna, ultricies eu elementum in, volutpat et leo.

</div>

 

<h3>Przykład outline-offset:12px</h3>

<div style="width:200px;height:200px;margin-left:3cm;outline: 2px solid red;outline-offset: 12px;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum hendrerit risus, quis viverra est cursus quis. Donec eu nisi mauris, in laoreet diam. Nulla sit amet velit a metus tincidunt ullamcorper eu ut sem. Vivamus ipsum magna, ultricies eu elementum in, volutpat et leo.

</div>

</div>

<</przykład>>

Rysunek 15.30. Przykład działania outline-offset

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15803967