Implémenter l'effet de coins arrondis en CSS3-Questions et réponses frontales-php.cn

Implémenter l'effet de coins arrondis en CSS3

WBOY

Libérer： 2022-08-11 17:28:35

original

3220 Les gens l'ont consulté

En CSS3, vous pouvez utiliser l'attribut "border-radius" pour obtenir l'effet de coin arrondi. Cet attribut est utilisé pour définir les coins arrondis de la bordure extérieure de l'élément, et cet attribut est un attribut abrégé qui peut être utilisé. pour définir respectivement les styles des quatre coins arrondis, la syntaxe est "element object {border-radius: 1-4 length|% / 1-4 length|%;}".

Implémenter l'effet de coins arrondis en CSS3

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Obtenir des coins arrondis en CSS3

border-radius vous permet de définir la bordure extérieure d'un élément à arrondir. Détermine un cercle lors de l'utilisation d'un rayon et une ellipse lors de l'utilisation de deux rayons. L'intersection de ce cercle (ovale) et de la bordure crée un effet de coin arrondi.

L'attribut border-radius est un attribut composite qui peut spécifier jusqu'à quatre attributs border-*-radius

Syntaxe

border-radius: 1-4 length|% / 1-4 length|%;

Copier après la connexion

Remarque : L'ordre des quatre valeurspour chaque rayon est : coin supérieur gauche , coin supérieur droit, coin droit Coin inférieur, coin inférieur gauche. Si le coin inférieur gauche est omis, le coin supérieur droit est le même. Si le coin inférieur droit est omis, le coin supérieur gauche est le même. Si le coin supérieur droit est omis, le coin supérieur gauche est le même.

length définit la forme de la courbe.
% Utilisez % pour définir la forme des coins.

L'exemple est le suivant :

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px; 
background:#dddddd;
width:350px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body>
<div>border-radius 属性允许您向元素添加圆角。</div>
</body>
</html>

Copier après la connexion

Résultat de sortie :

Implémenter leffet de coins arrondis en CSS3