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)

藏色散人
Libérer: 2018-08-13 16:52:51
original
4487 Les gens l'ont consulté

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>
Copier après la connexion

L'effet est le suivant :

Comment écrire du code de bordure arrondie CSS ? (exemple de code)

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|%;
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal