Maison  >  Article  >  interface Web  >  Comment écrire un seul côté des coins arrondis en CSS

Comment écrire un seul côté des coins arrondis en CSS

WBOY
WBOYoriginal
2021-12-06 11:28:303492parcourir

Écriture : "border-radius : valeur arrondie en haut à gauche, valeur arrondie en haut à droite, valeur arrondie en bas à droite, valeur arrondie en bas à gauche ;" ; l'attribut "border-radius" est utilisé pour définir le style des coins arrondis de l'élément et les valeurs. ​​des attributs peuvent être définis séparément. Pour la valeur arrondie des quatre coins de l'élément, il vous suffit de définir la valeur de l'attribut arrondi sur "0" si vous ne souhaitez pas afficher les coins arrondis.

Comment écrire un seul côté des coins arrondis en CSS

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

Comment écrire un seul côté des coins arrondis en CSS

En CSS, vous pouvez utiliser l'attribut border-radius pour afficher un seul côté des coins arrondis. Cet attribut est utilisé pour définir le coin arrondi. style de l'élément.

La syntaxe est :

border-radius:左上圆角值 右上圆角值 右下圆角值 左下圆角值;

L'exemple est le suivant :

<!DOCTYPE html>
<html>
<head>
<style> 
div{
border:2px solid #a1a1a1;
height:350px;
background:#dddddd;
width:350px;
border-radius:25px 25px 0 0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Résultat de sortie :

Comment écrire un seul côté des coins arrondis en CSS

(Partage vidéo d'apprentissage : Tutoriel vidéo CSS)

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!

Déclaration:
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