Bordure CSS3
Bordures CSS3
Avec CSS3, vous pouvez créer des bordures arrondies, ajouter des zones d'ombre
Dans ce chapitre, vous découvrira les propriétés de bordure suivantes
| 属性 | 说明 | CSS |
|---|---|---|
| border-image | 设置所有边框图像的速记属性。 | 3 |
| border-radius | 一个用于设置所有四个边框- *-半径属性的速记属性 | 3 |
| box-shadow | 附加一个或多个下拉框的阴影 | 3 |
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.
La propriété border-radius est utilisée pour créer des coins arrondis en CSS3 :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
border:2px solid #4269e1;
padding:10px 40px;
background: #d8dd2e;
width:150px;
border-radius:25px;
}
</style>
</head>
<body>
<div>圆角边框！</div>
</body>
</html>Exécuter Essayez le programme
CSS3 box shadow
La propriété box-shadow en CSS3 est utilisée pour ajouter une ombre :
<!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 #47d1b1;
text-align: center;
}
</style>
</head>
<body>
<div>CSS3盒阴影</div>
</body>
</html> Exécutez le programme et essayez-le
Image de bordure CSS3
Avec la propriété CSS3 border-image, vous peut utiliser des images Créer une bordure :
L'attribut border-image vous permet de spécifier une image comme bordure !
<!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(/upload/course/000/000/006/58a4feb498981164.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(/upload/course/000/000/006/58a4feb498981164.png) 30 30 round; /* Opera */
border-image:url(/upload/course/000/000/006/58a4feb498981164.png) 30 30 round;
}
#stretch
{
-webkit-border-image:url(/upload/course/000/000/006/58a4feb498981164.png) 30 30 stretch; /* Safari 5 and older */
-o-border-image:url(/upload/course/000/000/006/58a4feb498981164.png) 30 30 stretch; /* Opera */
border-image:url(/upload/course/000/000/006/58a4feb498981164.png) 30 30 stretch;
}
</style>
</head>
<body>
<p> border-image 属性用于设置图片的边框。</p>
<div id="round">这里，图像平铺（重复）来填充该区域。</div>
<br>
<div id="stretch">这里，图像被拉伸以填充该区域。</div>
<p>这是我们使用的图片素材：</p>
<img src="http://www.runoob.com/images/border.png" />
</body>
</html>Exécutez le programme et essayez-le
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
