Interfaz de usuario CSS3
Interfaz de usuario CSS3
En CSS3, aumentando el número de nuevas características de la interfaz de usuario para ajustar el tamaño del elemento, tamaño del marco y las fronteras exteriores.
En este capítulo, aprenderá las siguientes propiedades de la interfaz de usuario:
- cambiar el tamaño
- cuadro de dimensionamiento
- esbozar-offset
Soporte para el navegador
Las cifras de la tabla representan el primer navegador compatible con el número de versión de la propiedad.
Inmediatamente después de la -webkit- digital, -MS- o hace -moz- en apoyo del prefijo atribuyen primer número de la versión del navegador.
| 属性 | |||||
|---|---|---|---|---|---|
| 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 cambio de tamaño (cambio de tamaño)
En CSS3, cambiar el tamaño de la propiedad especifica si un elemento debe hacer el usuario para ajustar el tamaño.
código CSS es el siguiente:
Ejemplos
Un elemento div especificado por el usuario tamaño:
{
resize:both;
overflow:auto;
}
Trate »
CSS3 cuadro de cambio de tamaño (caja de medición)
Box-dimensionamiento de la propiedad le permite definir el contenido exacto de una zona específica de adaptación.
Ejemplos
Disposiciones de dos de lado a lado con un bloque de frontera:
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
Trate »
CSS3 modificado de forma (contorno-offset)
esbozar-offset propiedad contorno y trazar el perfil más allá del borde de la frontera.
Hay dos contorno y marco diferente:
- Contorno no ocupa espacio
- Puede ser contorno no rectangular
El código CSS es el siguiente:
Ejemplos
Disposiciones fuera de los píxeles de contorno en el borde de la frontera 15:
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
Trate »
Las nuevas características de la interfaz de usuario
| propiedad | explicación | CSS |
|---|---|---|
| apariencia | Se le permite tomar la apariencia de un elemento como una serie de elementos de interfaz de usuario estándar | 3 |
| cuadro de dimensionamiento | Se le permite adaptarse a la región y definir ciertos elementos en alguna manera | 3 |
| icono | Los creadores del elemento es como Icono capacidad equivalente. | 3 |
| nav-down | Especifica dónde navegar utilizando las teclas de flecha para desplazarse hacia abajo | 3 |
| NAV-índice | Especifica que un elemento de orden de tabulación | 3 |
| nav-izquierda | Especificar dónde utilizar las teclas de flecha de navegación izquierda para navegar | 3 |
| NAV-derecha | Especificar dónde utilizar las teclas de flecha derecha de navegación para navegar | 3 |
| nav-up | Especifica dónde navegar utilizando las teclas de flecha para desplazarse hacia arriba | 3 |
| esbozar-offset | Modificado contorno exterior y dibujar sobre el borde de la frontera | 3 |
| cambiar el tamaño | Especificar si un elemento se cambia el tamaño por el usuario | 3 |