CSS
Wytyczne
Szukaj…
Składnia
- kontur: kolor konturu styl konturu szerokość-konturu | inicjał | dziedziczyć;
- szerokość konturu: średnia | cienki | gruby | długość | inicjał | dziedziczyć;
- styl konturu: brak | ukryty | kropkowane | przerywany | stałe | podwójne | rowek | grzbiet | wstawka | początek | inicjał | dziedziczyć;
Parametry
| Parametr | Detale |
|---|---|
| kropkowany | kropkowany kontur |
| przerywany | zarys przerywany |
| solidny | solidny zarys |
| podwójnie | podwójny kontur |
| rowek | Kontur rowkowany 3D, zależy od wartości koloru konturu |
| grzbiet | Kontur prążkowany 3D, zależy od wartości koloru konturu |
| wstawka | Kontur wstawki 3D, zależy od wartości koloru konturu |
| początek | Zarys konturu 3D, zależy od wartości koloru konturu |
| Żaden | bez konturu |
| ukryty | ukryty kontur |
Uwagi
outline jest teraz opisany w Podstawowym interfejsie użytkownika , moduł CSS Poziom 3 (został już opisany w REC CSS2.1)
Właściwość Kontur jest domyślnie zdefiniowana w przeglądarkach dla elementów możliwych do aktywacji w :focus stanie :focus .
Nie należy go usuwać, patrz http://outlinenone.com, który stwierdza:
Co robi właściwość konturu?
Zapewnia wizualną informację zwrotną dla linków, które mają „fokus” podczas nawigacji w dokumencie internetowym za pomocą klawisza TAB (lub odpowiednika). Jest to szczególnie przydatne dla osób, które nie mogą używać myszy lub mają zaburzenia widzenia. Jeśli usuniesz kontur, Twoja witryna stanie się niedostępna dla tych osób. (…)
Ciekawe powiązane przykłady dotyczące przepełnienia stosu:
Przegląd
Kontur to linia, która biegnie wokół elementu poza granicę. W przeciwieństwie do border kontury nie zajmują miejsca w modelu pudełkowym. Tak więc dodanie konturu do elementu nie wpływa na pozycję elementu ani innych elementów.
Ponadto kontury mogą nie być prostokątne w niektórych przeglądarkach. Może się to zdarzyć, jeśli outline jest stosowana na span elementu, który ma tekst z różnych font-size właściwości wewnątrz niego. W przeciwieństwie do granic kontury nie mogą mieć zaokrąglonych rogów.
Zasadnicze części outline to outline-color outline-style outline-width .
Definicja konturu jest równoważna definicji granicy:
Kontur jest linią wokół elementu. Jest wyświetlany wokół marginesu elementu. Różni się jednak od własności granicznej.
outline: 1px solid black;
styl konturu
Właściwość outline-style służy do ustawiania stylu konturu elementu.
p {
border: 1px solid black;
outline-color:blue;
line-height:30px;
}
.p1{
outline-style: dotted;
}
.p2{
outline-style: dashed;
}
.p3{
outline-style: solid;
}
.p4{
outline-style: double;
}
.p5{
outline-style: groove;
}
.p6{
outline-style: ridge;
}
.p7{
outline-style: inset;
}
.p8{
outline-style: outset;
}
HTML
<p class="p1">A dotted outline</p>
<p class="p2">A dashed outline</p>
<p class="p3">A solid outline</p>
<p class="p4">A double outline</p>
<p class="p5">A groove outline</p>
<p class="p6">A ridge outline</p>
<p class="p7">An inset outline</p>
<p class="p8">An outset outline</p>
