CSS用户界面
CSS用户界面
W tym rozdziale nauczysz się poniższych atrybutów interfejsu użytkownika CSS:
resizeoutline-offset
Wsparcie przeglądarki
Liczby w tabeli oznaczają pierwszą wersję przeglądarki, która w pełni obsługuje atrybut.
| 属性 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| resize | 4.0 | Nieobsługiwane | 5.0 | 4.0 | 15.0 |
| outline-offset | 4.0 | 15.0 | 5.0 | 4.0 | 9.5 |
CSS dostosowywanie rozmiaru
resize Atrybut określa, czy element powinien (i w jaki sposób) być dostosowywany przez użytkownika.
Ten element div można dostosować przez użytkownika!
Dostosowywanie rozmiaru: kliknij i przeciągnij dolny prawy róg tego elementu div.
Uwaga:Internet Explorer nie obsługuje atrybutu resize.
Poniższy przykład pozwala użytkownikowi dostosować tylko szerokość elementu <div>:
Przykład
div {
resize: horizontal;
overflow: auto;
}
Poniższy przykład pozwala użytkownikowi dostosować tylko wysokość elementu <div>:
Przykład
div {
resize: vertical;
overflow: auto;
}
Poniższy przykład pozwala użytkownikowi dostosować wysokość i szerokość elementu <div>:
Przykład
div {
resize: both;
overflow: auto;
}
W wielu przeglądarkach, element <textarea> domyślnie jest skalowalny. Tutaj użyliśmy atrybutu resize, aby wyłączyć tą skalowalność:
Przykład
textarea {
resize: none;
}
Przesunięcie konturu CSS
outline-offset Atrybut dodaje przestrzeń między konturem a krawędzią elementu.
Uwaga:Kontur różni się od ramki! W przeciwieństwie do ramki, linie konturu są rysowane poza krawędzią elementu i mogą nachodzić na inne treści. Ponadto, kontur nie jest częścią wymiarów elementu: całkowita szerokość i wysokość elementu nie są wpływowane przez szerokość linii konturu.
Poniższy przykład używa atrybutu outline-offset, aby dodać przestrzeń między krawędzią ramki a konturem:
Przykład
div.ex1 {
margin: 20px;
border: 1px solid black;
outline: 4px solid red;
outline-offset: 15px;
}
div.ex2 {
margin: 10px;
border: 1px solid black;
outline: 5px dashed blue;
outline-offset: 5px;
}
