|
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 |
