Interfejs użytkownika CSS3
CSS3 posiada nowe funkcje interfejsu użytkownika, takie jak zmiana rozmiaru elementów, kontury, a także doboru skrzynki.
W tym rozdziale dowiesz się o następujących właściwościach interfejsu użytkownika:
-
resize -
outline-offset
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
Liczby następnie -webkit- lub -moz- określić pierwszą wersję, która pracowała z prefiksem.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| resize | 4.0 | Nieobsługiwany | 5.0 4.0 -moz- | 4.0 | 15.0 |
| outline-offset | 4.0 | Nieobsługiwany | 5.0 4.0 -moz- | 4.0 | 9.5 |
Zmiana rozmiaru CSS3
resize właściwość określa, czy dany element powinien być skalowalny przez użytkownika.
Poniższy przykład pozwala użytkownikowi zmieniać rozmiar tylko szerokość <div> element:
Poniższy przykład pozwala użytkownikowi zmieniać rozmiar tylko wysokość <div> element:
Poniższy przykład pozwala użytkownikowi zmieniać rozmiar zarówno wysokość i szerokość <div> element:
CSS3 Zarys offsetowy
outline-offset nieruchomość dodaje odstęp między konturem a krawędzią lub obramowanie elementu.
Zarysy różnią się od granic na trzy sposoby:
- Zarys jest linia przebiegająca wokół elementów, na zewnątrz krawędzi obramowania
- Zarys nie zajmują miejsca
- Zarys może być inna niż prostokątna
W poniższym przykładzie użyto właściwości outline-offset wstawić spację 15px między granicą a zarysie:
Przykład
div
{
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
Spróbuj sam " Interfejs użytkownika Właściwości CSS3
Poniższa tabela zawiera wszystkie właściwości interfejsu użytkownika:
| Nieruchomość | Opis |
|---|---|
| box-sizing | Pozwala to dopełnienie i obramowanie w łącznej wysokości i szerokości elementu w |
| nav-down | Określa, w którym poruszać się przy użyciu klawisza nawigacyjnego strzałka w dół |
| nav-index | Określa kolejność przechodzenia przez element |
| nav-left | Określa, w którym poruszać się przy użyciu klawisza nawigacyjnego strzałki lewej |
| nav-right | Określa, w którym poruszać się przy użyciu klawisza nawigacyjnego strzałki w prawym |
| nav-up | Określa, w którym poruszać się przy użyciu klawisza nawigacyjnego strzałki w górę |
| outline-offset | Dodaje odstęp między konturem a krawędzią lub obramowanie elementu |
| resize | Określa, czy element jest skalowalny przez użytkownika |