Maison > Article > interface Web > Quels sont les trois nouveaux effets de bordure ajoutés à CSS3 ?
Quels sont les trois nouveaux effets de bordure ajoutés à CSS3 ?
- 青灯夜游original
- 2022-04-25 16:30:352256parcourir
Trois nouveaux effets de bordure ajoutés au CSS3 : 1. Image de bordure "border-image", qui peut ajouter une image d'arrière-plan à la bordure ; 2. Bordure aux coins arrondis "border-radius", qui peut ajouter un ou plusieurs effets de coins arrondis à la bordure. ;3. L'ombre de la bordure "box-shadow" peut ajouter une ou plusieurs ombres à la boîte de l'élément.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
css3 ajoute trois nouveaux effets de bordure
| Attributs | Description | CSS | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| border-image | Définit des attributs abrégés pour toutes les images de bordure. | 33 | ||||||||||||
|
1. L'image de bordure "border-image" border-image peut ajouter une image de fond à la bordure. Les dernières versions de tous les principaux navigateurs prennent désormais en charge l'attribut border-image. Syntaxe :
Description : L'attribut border-image doit définir 3 aspects du contenu. (1) Chemin de l'image. (2) Largeur de coupe : la largeur de coupe des quatre côtés, dans l'ordre : bord supérieur, bord droit, bord inférieur et bord gauche (dans le sens des aiguilles d'une montre). (3) Méthode de carrelage : Il existe 3 valeurs, à savoir répéter, arrondir et étirer. Dans tous les exemples de cette section, nous utilisons l'image 90px×90px affichée dans l'image comme image d'arrière-plan de la bordure. Exemple de code : <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:210px;
height:150px;
border:30px solid gray;
border-image:url(img/border.png) 30 repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>L'aperçu du navigateur est comme indiqué ci-dessous.
Analyse : D'après l'effet de prévisualisation, nous pouvons savoir que les chiffres 1, 3, 7 et 9 situés aux 4 coins sont toujours situés aux 4 coins. Ensuite, les 4 bordures 2, 4, 6 et 8 seront continuellement carrelées. Pour l'attribut border-image, nous le résumons comme suit : (1) Lors de la création d'une image d'arrière-plan de bordure, 4 côtés doivent être créés et la partie centrale doit être évidée. (2) La largeur de chaque côté de l'image d'arrière-plan de la bordure doit être la même que la largeur de la bordure correspondante (c'est-à-dire la largeur de la bordure). 2. Bordure coins arrondis "border-radius" L'attribut border-radius peut ajouter un effet de coin arrondi à la bordure L'attribut border-radius définit le rayon du coin de l'élément, qui peut être obtenu grâce à l'attribut CSS border-radius. Un style "arrondi" pour n'importe quel élément. Syntaxe : border-radius: none ｜ length{1,4} [/ length{1,4}Chaque valeur peut être sous la forme d'une valeur numérique ou d'un pourcentage. longueur/longueurLa première longueur représente le rayon dans le sens horizontal, et la seconde représente le rayon dans le sens vertical. S'il s'agit d'une valeur, alors les quatre valeurs en haut à gauche, en haut à droite, en bas à droite et en bas à gauche sont égales. S'il y a deux valeurs, alors les parties supérieure gauche et inférieure droite sont égales et constituent la première valeur, et les parties supérieure droite et inférieure gauche sont égales et constituent la deuxième valeur. En plus des abréviations ci-dessus, vous pouvez également écrire les quatre coins séparément comme une bordure, comme suit : border-top-left-radius: //左上角 border-top-right-radius: //右上角 border-bottom-right-radius: //右下角 border-bottom-left-radius: //左下角 sont les rayons dans les directions horizontale et verticale respectivement. Si la deuxième valeur est omise, les rayons dans le sens horizontal. et les directions verticales sont égales. -webkit-border-radius: 10px 20px 30px; -moz-border-radius: 10px 20px 30px; border-radius: 10px 20px 30px; Veuillez écrire le formulaire standard après le formulaire privé du navigateur. Exemple : <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="刘艳">
<title></title>
<style>
img {
border-radius: 30px;
margin: 100px;
}
</style>
</head>
<body>
<img src="../images/photo.jpg" style="max-width:90%" alt="Quels sont les trois nouveaux effets de bordure ajoutés à CSS3 ?" >
</body>
</html>
3. Border shadow "box-shadow" En CSS, vous pouvez utiliser l'attribut box-shadow pour obtenir l'effet d'ombre de bordure. peut être défini sur une ou sur une boîte avec plusieurs ombres portées. Syntaxe box-shadow: h-shadow v-shadow blur spread color inset; Valeurs possibles :
注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。 box-shadow属性的使用 1、水平垂直偏移为0也可以有阴影 如果offset-x或offset-y值为0，则阴影在元素背后，此时给blur-radius值或spread值可以产生阴影效果。 例子：
但是有一点要注意：扩展阴影必须和阴影模糊半径配合使用。 我个人觉得应该是没有配合使用这一说，但不可能只设置扩展阴影，因为扩展阴影和阴影模糊的取值都可以为正。如果只有扩展阴影的话，会被浏览器当做模糊阴影来解析，所以也可以简单理解为“扩展阴影必须和阴影模糊半径配合使用”，如果只用扩展阴影，可以写成：box-shadow:0 0 0 1px;。 <style type="text/css">
div{
width: 100px;
height: 100px;
margin:50px;
border: 10px dotted pink;
display: inline-block;
}
.blur{
box-shadow: 0 0 20px ;
/*box-shadow: 0 0 20px green;*/ /*也可以自定义颜色*/
}
.spread-positive{
box-shadow: 0 0 20px 5px ;
/* box-shadow: 0 0 20px 5px green;*/ /*也可以自定义颜色*/
}
.spread-negative{
box-shadow: 0 0 20px -5px ;
/* box-shadow: 0 0 20px -5px green;*/ /*也可以自定义颜色*/
}
</style>
<body>
<div class="blur"></div>
<div class="spread-positive"></div>
<div class="spread-negative"></div>
</body>
2、设置水平垂直偏移得到阴影效果 outset情况：水平垂直偏移为0，但是不设置blur和spread，看不到阴影，因为此时box-shadow的周长和border-box一样，所以可以通过设置偏移让阴影显示出来。 inset情况：水平垂直偏移为0，不设置blur和spread，同样看不到阴影，因为此时box-shadow的周长和padding-box一样，同样可通过设置偏移让阴影显示出来。 例子: <style type="text/css">
div{
width: 100px;
height: 100px;
margin:50px;
border: 10px dotted pink;
display: inline-block;
}
.shadow0{box-shadow: 0 0;}
.shadow1{box-shadow: 1px 1px;}
.shadow10{box-shadow: 10px 10px;}
.inset-shadow0{box-shadow: 0 0 inset;}
.inset-shadow1{box-shadow: 1px 1px inset;}
.inset-shadow10{box-shadow: 10px 10px inset;}
</style>
<body>
<div class="shadow0"></div>
<div class="shadow1"></div>
<div class="shadow10"></div>
<div class="inset-shadow0"></div>
<div class="inset-shadow1"></div>
<div class="inset-shadow10"></div>
</body>3、投影方式 投影方式默认是outset，即外部投影，可设置inset让向内投影。 例子：第一个div默认outset，第二个设置inset，第三个同时设置两个阴影可以更好的看到outset和inset的关系，第四个div可以看出inset阴影在背景之上，内容之下。 <style type="text/css">
div{
width: 100px;
height: 100px;
margin:50px;
border: 10px dotted pink;
display: inline-block;
vertical-align: top;
}
.outset{
box-shadow: 10px 10px teal;
}
.inset{
box-shadow: 10px 10px teal inset;
}
.double{
box-shadow: 10px 10px teal inset,10px 10px teal;
}
.bg{
background-color: yellow;
}
</style>
<body>
<div class="outset"></div>
<div class="inset"></div>
<div class="double"></div>
<div class="inset bg">inset阴影在背景之上，内容之下</div>
</body>
4、如果元素同时指定border-radius属性，则阴影呈现相同的圆角。 <style type="text/css">
div{
width: 100px;
height: 100px;
margin:50px;
border: 10px dotted pink;
display: inline-block;
border-radius: 50px;
}
.shadow{
box-shadow: 0 0 10px 10px green;
}
</style>
<body>
<div class="shadow"></div>
</body>
|
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!
Articles Liés
Voir plus- Quelle est l'utilisation du sélecteur d'attribut CSS3
- CSS3 a-t-il un attribut de réduction d'image ?
- Que signifie la transition en CSS3
- Comment supprimer des éléments du premier élément dans le filtre CSS3
- Le dégradé linéaire CSS3 peut-il réaliser des triangles ?
- Quels sont les nouveaux sélecteurs de pseudo-classe en CSS3 ?