Maison >interface Web >tutoriel CSS >Comment écrire du code de bordure arrondie CSS ? (exemple de code)
Comment écrire du code de bordure arrondie CSS ? (exemple de code)
- 藏色散人original
- 2018-08-13 16:52:514469parcourir
Cet article présente principalement comment obtenir l'effet de bordure CSS.
L'exemple spécifique de code de bordure arrondie CSS est le suivant :
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>css圆角边框代码实例</title>
<meta charset="UTF-8">
<style type="text/css">
div
{
color: white;
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px;
background: #029789;
width:350px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body>
<div>css边框设置使用border-radius 属性即可向元素添加圆角。</div>
</body>
</html>L'effet est le suivant :
Ici, le principal attribut impliqué est border-radius, qui peut être utilisé pour ajuster la bordure arrondie CSS.
Remarque : Comment utiliser border-radius :
border-radius: 1-4 length|% / 1-4 length|%;
Définissez les quatre valeurs de chaque rayon dans cet ordre. Si le coin inférieur gauche est omis, c'est la même chose que le coin supérieur droit. Si le coin inférieur droit est omis, c'est la même chose que le coin supérieur gauche. Si le coin supérieur droit est omis, c'est la même chose que le coin supérieur gauche.
-webkit-border-radius est destiné à la compatibilité avec Chrome ou Safari.
-moz-border-radius est destiné à la compatibilité avec Firefox.
Ce qui précède est une introduction détaillée au code de bordure arrondie CSS. J'espère qu'il sera utile aux amis dans le besoin.
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!