Nouveaux attributs de bordure en CSS3 : 1. "border-image", qui est un attribut abrégé utilisé pour définir le style de la bordure de l'élément ; 2. "border-radius", qui est utilisé pour définir le style arrondi des quatre coins de l'élément ; 3. "box-shadow", cet attribut est utilisé pour définir une ou plusieurs zones d'ombre déroulantes de l'élément.
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
Quels sont les nouveaux attributs de bordure en CSS3 ?
En CSS3, les nouveaux attributs de bordure sont : les attributs border-image, border-radius et box-shadow.
1. L'attribut border-image
border-image est un attribut raccourci permettant de définir les attributs suivants :
L'exemple est le suivant :
<html>
<head>
<style>
div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}
#round
{
-moz-border-image:url(/i/border.png) 30 30 round;/* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 round;/* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 round;/* Opera */
border-image:url(/i/border.png) 30 30 round;
}
#stretch
{
-moz-border-image:url(/i/border.png) 30 30 stretch;/* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 stretch;/* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 stretch;/* Opera */
border-image:url(/i/border.png) 30 30 stretch;
}
</style>
</head>
<body>
<div id="round">在这里，图片铺满整个边框。</div>
<br>
<div id="stretch">在这里，图片被拉伸以填充该区域。</div>
<p>这是我们使用的图片：</p>
<img src="/i/border.png" alt="Quels sont les nouveaux attributs de bordure en CSS3 ?" >
<p><b>注释：</b> Internet Explorer 不支持 border-image 属性。</p>
<p>border-image 属性规定了用作边框的图片。</p>
</body>
</html>Résultat de sortie :
2. border- L'attribut radius
border-radius est un attribut raccourci, utilisé pour définir le style arrondi des quatre coins. La syntaxe est la suivante :
border-radius: 1-4 length|% / 1-4 length|%;
L'exemple est le suivant :
<html>
<head>
<style>
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:350px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body>
<div>border-radius 属性允许您向元素添加圆角。</div>
</body>
</html>Résultat de sortie :
. 
3. box-shadow
La propriété box-shadow peut définir une ou plusieurs zones d'ombre déroulantes. La syntaxe est la suivante :
box-shadow: h-shadow v-shadow blur spread color inset;
L'exemple est le suivant :
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Résultat de sortie :
(Partage vidéo d'apprentissage : Tutoriel vidéo CSS)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
