Maison >interface Web >tutoriel CSS >Comment utiliser la propriété CSS border-top-left-radius
Comment utiliser la propriété CSS border-top-left-radius
- silencementoriginal
- 2019-05-26 14:28:183497parcourir
Définition et utilisation de l'attribut border-top-left-radius
En CSS, l'attribut border-top-right-radius est utilisé pour La bordure dans le coin supérieur droit de l'élément est définie sur une bordure arrondie (elle peut également avoir d'autres formes). Cet attribut est généralement utilisé lorsque le coin supérieur droit est défini pour être arrondi séparément si nous voulons définir les quatre ; Les coins de l'élément doivent être arrondis en même temps, bien sûr nous pouvons utiliser cet attribut et trois autres attributs similaires à cet attribut (voir les attributs similaires ci-dessous), mais nous choisissons généralement l'attribut border-radius. définissez les paramètres des quatre coins dans la même instruction, afin de pouvoir omettre quelques lignes de code et une meilleure lisibilité.
L'attribut Border-top-left-radius est similaire à l'attribut
attribut border-top-left-radius : définissez le coin supérieur gauche sur un coin arrondi ou autre forme
propriété border-bottom-left-radius : définissez le coin inférieur gauche sur un coin arrondi ou une autre forme
propriété border-bottom-right-radius : définissez le coin inférieur droit sur un coin arrondi ou une autre forme
format de syntaxe de l'attribut border-top-left-radius
syntaxe css : border-top-right-radius:5px 10px
Syntaxe CSS : border-top-right-radius:6px
Syntaxe CSS : border-top-right-radius:30% 80%
Syntaxe CSS : border-top-right -radius:50%
Syntaxe JavaScript : object.style.borderTopRightRadius="5px"
description de la valeur de l'attribut border-top-left-radius
Il existe deux valeurs d'attribut de rayon supérieur droit. Si deux valeurs d'attribut sont identiques, vous pouvez omettre une valeur d'attribut et l'effet sera exactement le même. Lorsqu'il y a deux valeurs d'attribut : la première valeur d'attribut représente le rayon horizontal de la forme du coin supérieur droit et la deuxième valeur d'attribut représente le rayon vertical lorsqu'il n'y a qu'une seule valeur d'attribut : la valeur d'attribut représente le rayon horizontal et le rayon vertical ; de la forme du coin supérieur droit.
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css border-top-right-radius属性将右上角设置为圆角边框</title>
<style type="text/css">
body{background: #ddd;font-size:20px;}
#a,#b,#c{margin-top:10px;width:360px;border:2px solid #0000FF;padding: 16px;}
#a{border-top-right-radius:56px 36px;}
#b{border-top-right-radius:60px;}
#c{border-top-right-radius:20% 80%;}
</style>
</head>
<body>
<div id = "a">border-top-right-radius:56px 36px;</div>
<div id = "b">border-top-right-radius:60px;</div>
<div id = "c">border-top-right-radius:20% 80%;</div>
</body>
</html>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!