1. Casa
  2. Interfaccia utente CSS3

Il miglior tutorial Interfaccia utente CSS3 Nel 2024, in questo tutorial puoi imparare Interfaccia utente CSS3,Supporto per il browser,CSS3 ridimensionamento (ridimensionamento),Esempi,scatola CSS3 ridimensionamento (Box Sizing),Esempi,CSS3 modificato forma (outline-offset),Esempi,Le nuove funzionalità di interfaccia utente,

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.

L'elemento div ridimensionata dall'utente. (In Firefox 4+, Chrome e Safari,)

codice CSS è il seguente:

OperaSafariChromeFirefoxInternet Explorer

Esempi

Un elemento div specificato dall'utente Dimensione:

div
{
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.

OperaSafariChromeFirefoxInternet Explorer

Esempi

Disposizioni di due fianco a fianco con un blocco di confine:

div
{
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
Questo div all'esterno del bordo 15 ha un pixel di contorno.

Il codice CSS è il seguente:

OperaSafariChromeFirefoxInternet Explorer

Esempi

Disposizioni di fuori dei pixel di contorno sul bordo del bordo 15:

div
{
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

Tutorial caldi

Contattaci

Interfaccia utente CSS3
10/30