En utilisant la propriété CSS3 border-radius, vous pouvez créer des « coins arrondis » pour n'importe quel élément. Avec la propriété border-radius, vous pouvez utiliser les règles suivantes :
(1) Quatre valeurs : la première valeur est le coin supérieur gauche, la deuxième valeur est le coin supérieur droit, la troisième valeur est le coin inférieur droit et la quatrième valeur est le coin inférieur gauche (2) Trois valeurs : la première la valeur est le coin supérieur gauche, la deuxième valeur est le coin supérieur droit et le coin inférieur gauche, la troisième valeur est le coin inférieur droit (3) Deux valeurs : la première valeur est le coin supérieur gauche et le coin inférieur droit, la la deuxième valeur est le coin supérieur droit et le coin inférieur gauche (4) Une valeur : les quatre valeurs de congé sont les mêmes
Si vous souhaitez que les graphiques aient un effet de coins arrondis, il vous suffit d'ajouter un seul attribut, l'attribut border-radius. Si vous souhaitez qu'il soit très rond, augmentez cette valeur.
<!DOCTYPEhtml>
<html>
<tête>
<méta charset="UTF-8">
<title>Page d'accueil</title>
<style>
div{
largeur : 100 px ;
hauteur : 100px ;
couleur d'arrière-plan : rvb (151, 26, 49 );
rayon de bordure : 10 px ;
}
img{
largeur : 100 px ;
hauteur : 100px ;
rayon de bordure : 10 px ;
}
</style>
</tête>
<corps>
<div>
<img src="../vue/1.jpg">
</div>
</corps>
</html>Si vous voulez qu'il soit rond, écrivez simplement 100 %.
effet d'ombre boîte-ombre
margin : 0 auto : Il n'est pas nécessaire de contrôler le haut et le bas. Auto permet de répartir uniformément les espaces gauche et droit, puis de placer la boîte au milieu. Laisser les espaces entre les espaces gauche et droit être répartis uniformément est ce que fait auto.
0 signifie aucune ombre dans la direction horizontale, le deuxième 0 signifie aucune ombre dans la direction verticale et le troisième est le flou de l'ombre.
<!DOCTYPEhtml>
<html>
<tête>
<méta charset="UTF-8">
<title>Page d'accueil</title>
<link href="" type="text/css" rel="stylesheet"/>
<style type="text/css">
div{
largeur : 500 px ;
hauteur : 500 px ;
couleur de fond : vertjaune ;
marge : 0 automatique ;
box-shadow : 0 0 50px rgba(0, 0, 0, 0.5);
}
</style>
</tête>
<corps>
<div classe="d1">
</div>
</corps>
</html>Ceci conclut cet article sur les nouvelles fonctionnalités CSS3, l'effet d'ombre de boîte et le rayon de bordure arrondi. Pour plus d'informations sur la nouvelle fonctionnalité CSS3, veuillez rechercher les articles précédents sur downcodes.com ou continuer à parcourir les articles connexes, j'espère. vous soutiendrez davantage downcodes.com à l’avenir !