border-radius Comment ajouter des bordures arrondies aux éléments-tutoriel HTML-php.cn

border-radius Comment ajouter des bordures arrondies aux éléments

php中世界最好的语言

Libérer： 2018-01-20 09:35:22

original

2260 Les gens l'ont consulté

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的值*/   
　　}

Copier après la connexion

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;/*四个圆角值都设置为宽度或高度值的一半*/  
　　}

Copier après la connexion

<!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>

Copier après la connexion

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!