Interfaccia utente CSS3
Interfaccia utente CSS3
In CSS3, aumentando il numero di nuove funzionalità di interfaccia utente per regolare la dimensione di elemento, dimensione del frame e frontiere esterne.
In questo capitolo, imparerete le seguenti proprietà di interfaccia utente:
- ridimensionare
- box-sizing
- delineare-offset
Supporto per il browser
I dati riportati nella tabella rappresentano il primo browser a supportare il numero di versione della proprietà.
Subito dopo la -webkit- digitale, -MS- o -moz- fa a sostegno del prefisso attribuiscono primo numero di versione del browser.
| 属性 | |||||
|---|---|---|---|---|---|
| resize | 4.0 | 不兼容 | 5.0 4.0 -moz- |
4.0 | 15.0 |
| box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.1 -webkit- |
9.5 |
| outline-offset | 4.0 | 不兼容 | 5.0 4.0 -moz- |
4.0 | 9.5 |
CSS3 ridimensionamento (ridimensionamento)
In CSS3, ridimensionare proprietà specifica se un elemento dovrebbe all'utente di regolare le dimensioni.
codice CSS è il seguente:
Esempi
Un elemento div specificato dall'utente Dimensione:
{
resize:both;
overflow:auto;
}
Prova »
scatola CSS3 ridimensionamento (Box Sizing)
box-sizing proprietà consente di definire il contenuto esatto di una determinata area di adattamento.
Esempi
Disposizioni di due fianco a fianco con un blocco di confine:
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
Prova »
CSS3 modificato forma (outline-offset)
delineare-offset offset di proprietà di contorno e disegnare il profilo oltre il bordo del confine.
Ci sono due diversi contorni e telaio:
- Contour non occupa spazio
- Può essere contorno non rettangolare
Il codice CSS è il seguente:
Esempi
Disposizioni di fuori dei pixel di contorno sul bordo del bordo 15:
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
Prova »
Le nuove funzionalità di interfaccia utente
| proprietà | spiegazione | CSS |
|---|---|---|
| aspetto | Esso consente di rendere l'aspetto di un elemento come un elementi dell'interfaccia utente standard | 3 |
| box-sizing | Esso consente di adattare alla regione e di definire alcuni elementi in qualche modo | 3 |
| icona | I creatori del elemento è impostato su Icona capacità equivalente. | 3 |
| nav-down | Specifica dove navigare quando si utilizzano i tasti freccia per spostarsi verso il basso | 3 |
| nav-index | Specifica che un elemento di ordine di tabulazione | 3 |
| nav-sinistra | Specificare dove utilizzare i tasti di navigazione freccia sinistra per navigare | 3 |
| nav-destra | Specificare dove utilizzare i tasti di navigazione freccia destra per spostarsi | 3 |
| nav-up | Specifica dove navigare quando si utilizzano i tasti freccia per spostarsi su | 3 |
| delineare-offset | Modified contorno esterno e disegnare oltre il bordo del bordo | 3 |
| ridimensionare | Specificare se un elemento viene ridimensionato dall'utente | 3 |