CSS3 User Interface
CSS3 are caracteristici noi interfață de utilizator, cum ar fi elemente de redimensionare, contururi, și caseta de dimensionare.
În acest capitol veți învăța despre următoarele proprietăți de interfață cu utilizatorul:
-
resize -
outline-offset
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
Numerele urmat de -webkit- sau -moz- specifica prima versiune care a lucrat cu un prefix.
| Proprietate | |||||
|---|---|---|---|---|---|
| resize | 4.0 | Nu sunt acceptate | 5.0 4.0 -moz- | 4.0 | 15.0 |
| outline-offset | 4.0 | Nu sunt acceptate | 5.0 4.0 -moz- | 4.0 | 9.5 |
CSS3 Redimensionarea
resize proprietate specifică dacă este sau nu un element ar trebui să fie redimensionat de către utilizator.
Exemplul următor permite utilizatorului redimensiona numai lățimea unui <div> Element:
Exemplul următor permite utilizatorului redimensiona numai înălțimea unui <div> Element:
Exemplul următor permite utilizatorului redimensiona atât înălțimea și lățimea unui <div> Element:
CSS3 Schiță Offset
De outline-offset proprietate adaugă spațiu între o schiță și marginea sau a unui element de frontieră.
Contururile diferă de la frontiere în trei moduri:
- O schiță este o linie trasată în jurul valorii de elemente, în afara marginii de frontieră
- O schiță nu ocupă spațiu
- O schiță poate fi non-dreptunghiulare
Exemplul următor utilizează proprietatea de offset-contur pentru a adăuga un spațiu 15px între graniță și contur:
Exemplu
div
{
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
Încearcă - l singur » CSS3 Proprietăți User Interface
Tabelul de mai jos listează toate proprietățile de interfață cu utilizatorul:
| Proprietate | Descriere |
|---|---|
| box-sizing | Vă permite să includă padding și granița cu lățimea totală a elementului și înălțimea |
| nav-down | Specifică în cazul în care pentru a naviga atunci când se utilizează tasta de navigare săgeată în jos |
| nav-index | Specifică ordinea pentru un element de tab |
| nav-left | Specifică în cazul în care pentru a naviga atunci când se utilizează tasta de navigare din stânga-săgeată |
| nav-right | Specifică în cazul în care pentru a naviga atunci când se utilizează tasta de navigare săgeată dreapta |
| nav-up | Specifică în cazul în care pentru a naviga atunci când se utilizează tasta de navigare săgeată în sus |
| outline-offset | Adaugă spațiu între o schiță și marginea sau a unui element de frontieră |
| resize | Specifică dacă este sau nu un element este redimensionabilă de către utilizator |