Interface utilisateur CSS3
Interface utilisateur CSS3
En CSS3, en augmentant le nombre de nouvelles fonctionnalités de l'interface utilisateur pour ajuster la taille de l'élément, la taille d'image et les frontières extérieures.
Dans ce chapitre, vous apprendrez les propriétés de l'interface utilisateur suivantes:
- redimensionner
- box-sizing
- outline-décalage
support du navigateur
Les chiffres du tableau représentent le premier navigateur pour soutenir le numéro de version de la propriété.
Immédiatement après la -webkit- numérique, -ms- ou -moz- il y a à l'appui du préfixe d'attribut premier numéro de version du navigateur.
| 属性 | |||||
|---|---|---|---|---|---|
| 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 redimensionnement (Redimensionnement)
En CSS3, redimensionner propriété indique si un élément doit à l'utilisateur d'ajuster la taille.
le code CSS est la suivante:
Exemples
Un élément div spécifié par l'utilisateur Taille:
{
resize:both;
overflow:auto;
}
Essayez »
case CSS3 resize (Box Sizing)
box-sizing propriété vous permet de définir le contenu exact d'une zone spécifique de l'adaptation.
Exemples
Les dispositions de deux côte à côte avec un bloc de frontière:
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
Essayez »
CSS3 forme modifiée (outline-offset)
aperçu offset propriété décalage contour et dessiner le profil au-delà du bord de la frontière.
Il y a deux contour et cadre différent:
- Contour n'occupe l'espace
- Il peut être aperçu non rectangulaire
Le code CSS est la suivante:
Exemples
Dispositions en dehors des pixels de contour au bord de la bordure 15:
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
Essayez »
Les nouvelles fonctionnalités de l'interface utilisateur
| propriété | explication | CSS |
|---|---|---|
| apparence | Il vous permet de faire l'apparence d'un élément comme un des éléments d'interface utilisateur standard | 3 |
| box-sizing | Il vous permet d'adapter à la région et de définir certains éléments d'une certaine façon | 3 |
| icône | Les créateurs de l'élément est fixé à Icon capacité équivalente. | 3 |
| nav-down | Indique où naviguer lorsque vous utilisez les touches fléchées pour naviguer vers le bas | 3 |
| nav-index | Indique qu'un élément d'ordre Tab | 3 |
| nav-gauche | Indiquez où utiliser les touches flèche de navigation gauche pour naviguer | 3 |
| nav-droit | Indiquez où utiliser les touches flèche de navigation droite pour naviguer | 3 |
| nav-up | Indique où naviguer lorsque vous utilisez les touches fléchées pour naviguer vers le haut | 3 |
| outline-décalage | Modifié contour extérieur et de tirer sur le bord de la frontière | 3 |
| redimensionner | Indiquez si un élément est redimensionné par l'utilisateur | 3 |