Maison > Article > interface Web > border-radius Comment ajouter des bordures arrondies aux éléments
border-radius Comment ajouter des bordures arrondies aux éléments
- php中世界最好的语言original
- 2018-01-20 09:35:222225parcourir
Cette fois, je vais vous montrer comment ajouter une bordure arrondie à l'élément border-radius Quelles sont les précautions pour ajouter une bordure arrondie à l'élément border-radius. Voici le combat réel. Regardons le cas.
border-radius:10px; /* Tous les coins sont arrondis avec un rayon de 10px*/
border-radius: 5px 4px 3px 2px /* Les quatre valeurs de rayon sont les Coin supérieur gauche, coin supérieur droit, coin inférieur droit et coin inférieur gauche, dans le sens des aiguilles d'une montre*/
Ne pensez pas que la valeur de border-radius ne peut être qu'en unités px. Vous pouvez également utiliser des pourcentages ou des em. , mais la compatibilité n'est pas encore très bonne.
Demi-cercle supérieur solide :
Méthode : définissez la hauteur (hauteur) sur la moitié de la largeur (largeur) et définissez uniquement le rayon du coin supérieur gauche et du coin supérieur droit pour qu'il soit cohérent avec la hauteur de l'élément (supérieure à également OK).
div{
height:50px;/*是width的一半*/
width:100px;
background:#9da;
border-radius:50px 50px 0 0;/*半径至少设置为height的值*/
}Cercle plein :
Méthode : définissez les valeurs de largeur et de hauteur pour qu'elles soient cohérentes (c'est-à-dire un carré) et définissez-leur les quatre valeurs de coins arrondis La moitié de la valeur.
Le code suivant :
div{
height:100px;/*与width设置一致*/
width:100px;
background:#9da;
border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</www.dztcsd.com/title>
<style type="text/css">
div.circle{
height:100px;/*与width设置一致*/
width:100px;
background:#9da;
border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
}
/*任务部分*/
div.semi-circle{
height:100px;
width:50px;
background:#9da;
border-radius:?;
}
</style>
</head>
<body>
<div class="circle">
</div>
<br/>
<!--任务部分-->
<div class="semi-circle">
</div>
</body>
</html>Je pense que vous maîtrisez la méthode après avoir lu ces cas. Pour des informations plus intéressantes, veuillez faire attention au site Web chinois php Autre. articles connexes !
Lecture connexe :
Comment utiliser le serveur sse de h5 pour envoyer des événements EventSource
Le stockage local de H5 et les détails de la base de données locale Présentation
h5 comment implémenter la fonction de mémorisation du mot de passe
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!