Interface utilisateur CSS3
Dans CSS3, de nouvelles fonctionnalités d'interface utilisateur ont été ajoutées pour ajuster la taille des éléments, la taille de la boîte et la bordure extérieure.
Dans ce chapitre, vous découvrirez les propriétés suivantes de l'interface utilisateur :
resize
box-sizing
outline-offset
Support du navigateur
Le numéro dans le tableau indique le premier navigateur qui prend en charge cet attribut Version nombre.
Le numéro immédiatement avant -webkit-, -ms- ou -moz- est le premier numéro de version du navigateur qui prend en charge cet attribut de préfixe.
Redimensionnement CSS3
En CSS3, l'attribut resize précise si un élément doit être redimensionné par l'utilisateur.
Le code CSS est le suivant :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
border:2px solid;
padding:10px 40px;
width:300px;
resize:both;
overflow:auto;
}
</style>
</head>
<body>
<p><b>注意:</b> Firefox, Safari,和 Chrome 兼容 resize 属性.</p>
<div>调整属性指定一个元素是否由用户可调整大小的。.</div>
</body>
</html>Exécuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
CSS3 Box Sizing (Box Sizing)
Le box-sizing La propriété vous permet de définir de manière exacte le contenu spécifique adapté à un certain domaine.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">这个div占据了左边的一半。.</div>
<div class="box">这个div占据了右边的一半。</div>
</div>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Modification du contour CSS3 (outline-offset)
La propriété outline-offset décale le contour et dessine le contour au-delà du bord de la bordure.
Les contours diffèrent des bordures de deux manières :
Les contours ne prennent pas de place
Les contours peuvent être non rectangulaires
Le code CSS est le suivant :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
margin:20px;
width:150px;
padding:10px;
height:70px;
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 不兼容 outline-offset属性.</p>
<div>这个 div有一个轮廓边界15 px边境外的边缘。</div>
</body>
</html>Exécuter l'instance»
Cliquez" Bouton "Exécuter l'instance" pour afficher les instances en ligne
Nouvelles fonctionnalités de l'interface utilisateur
| 属性 | 说明 | CSS |
|---|---|---|
| appearance | 允许您使一个元素的外观像一个标准的用户界面元素 | 3 |
| box-sizing | 允许你以适应区域而用某种方式定义某些元素 | 3 |
| icon | 为创作者提供了将元素设置为图标等价物的能力。 | 3 |
| nav-down | 指定在何处使用箭头向下导航键时进行导航 | 3 |
| nav-index | 指定一个元素的Tab的顺序 | 3 |
| nav-left | 指定在何处使用左侧的箭头导航键进行导航 | 3 |
| nav-right | 指定在何处使用右侧的箭头导航键进行导航 | 3 |
| nav-up | 指定在何处使用箭头向上导航键时进行导航 | 3 |
| outline-offset | 外轮廓修饰并绘制超出边框的边缘 | 3 |
| resize | 指定一个元素是否是由用户调整大小 | 3 |
