Bordure CSS3
Avec CSS3, vous pouvez créer des bordures arrondies, ajouter des zones d'ombre et des images comme bordures sans utiliser de programme de conception comme Photoshop.
Dans ce chapitre, vous découvrirez les propriétés de bordure suivantes :
border-radius
box-shadow
border-image
Coins arrondis CSS3
L'ajout de coins arrondis en CSS2 est délicat. Nous avons dû utiliser des images différentes dans chaque coin.
En CSS3, il est facile de créer des coins arrondis.
En CSS3, la propriété border-radius est utilisée pour créer des coins arrondis :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
}
</style>
</head>
<body>
<div>border-radius 属性允许您为元素添加圆角边框！ </div>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Ombre de boîte CSS3
La propriété box-shadow en CSS3 est utilisée pour ajouter une ombre :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Image de bordure CSS3
Oui Avec la propriété CSS3 border-image, vous pouvez créer une bordure à l'aide d'une image :
Création d'une bordure à l'aide d'une image dans un div :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
border:15px solid transparent;
width:250px;
padding:10px 20px;
}
#round
{
-webkit-border-image:url(../style/images/border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(../style/images/border.png) 30 30 round; /* Opera */
border-image:url(../style/images/border.png) 30 30 round;
}
#stretch
{
-webkit-border-image:url(../style/images/border.png) 30 30 stretch; /* Safari 5 and older */
-o-border-image:url(../style/images/border.png) 30 30 stretch; /* Opera */
border-image:url(../style/images/border.png) 30 30 stretch;
}
</style>
</head>
<body>
<p><b>注意: </b> Internet Explorer 不支持 border-image 属性。</p>
<p> border-image 属性用于设置图片的边框。</p>
<div id="round">这里，图像平铺（重复）来填充该区域。</div>
<br>
<div id="stretch">这里，图像被拉伸以填充该区域。</div>
<p>这是我们使用的图片素材：</p>
<img src="/images/border.png" />
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Nouveau propriétés frontalières
| 属性 | 说明 | CSS |
|---|---|---|
| border-image | 设置所有边框图像的速记属性。 | 3 |
| border-radius | 一个用于设置所有四个边框- *-半径属性的速记属性 | 3 |
| box-shadow | 附加一个或多个下拉框的阴影 | 3 |
