Heim > Artikel > Web-Frontend > So verwenden Sie die CSS-Eigenschaft „Border-Top-Right-Radius“.
So verwenden Sie die CSS-Eigenschaft „Border-Top-Right-Radius“.
- silencementOriginal
- 2019-05-27 14:12:073271Durchsuche
Definition und Verwendung des Attributs „border-top-right-radius“
In CSS wird das Attribut „border-top-right-radius“ verwendet Der Rand in der oberen rechten Ecke des Elements wird auf einen abgerundeten Rand gesetzt (er kann auch in anderen Formen vorliegen, wenn die obere rechte Ecke separat abgerundet werden soll). Natürlich können wir die Ecken des Elements gleichzeitig abrunden. Verwenden Sie dieses Attribut und drei weitere Attribute, die diesem Attribut ähneln (siehe ähnliche Attribute unten), aber wir wählen im Allgemeinen das Attribut „border-radius“ Das Attribut „border-radius“ kann Definieren Sie die Einstellungen der vier Ecken in derselben Anweisung, sodass einige Codezeilen weggelassen werden können und die Lesbarkeit verbessert wird.
Ähnliche Eigenschaften wie die Eigenschaft „border-top-right-radius“
1. Legen Sie die obere linke Ecke auf eine abgerundete Ecke fest oder eine andere Form;
2.border-bottom-left-radius-Eigenschaft: Legen Sie die untere linke Ecke auf eine abgerundete Ecke oder eine andere Form fest;
3.border-bottom-right-radius-Eigenschaft : Legen Sie die untere rechte Ecke auf eine abgerundete Ecke oder andere Formen fest;
Border-Top-Right-Radius-Attributsyntaxformat
1.css-Syntax: Border-Top -right-radius:5px 10px
2.css-Syntax: border-top-right-radius:6px
3.css-Syntax: border-top-right-radius:30% 80%
4.css-Syntax: border-top-right-radius:50%
5. JavaScript-Syntax: object.style.borderTopRightRadius="5px"
Beschreibung des Attributwerts „border-top-right-radius“
Das Attribut „border-top-right-radius“ hat zwei Attributwerte. Wenn die beiden Attributwerte gleich sind, können Sie einen Attributwert weglassen und der Effekt wird genau derselbe sein. Wenn zwei Attributwerte vorhanden sind: Der erste Attributwert stellt den horizontalen Radius der oberen rechten Eckform dar, und der zweite Attributwert stellt den vertikalen Radius dar. Wenn nur ein Attributwert vorhanden ist, stellt der Attributwert den horizontalen Radius und den vertikalen Radius dar der oberen rechten Eckform.
Beispiel
<!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>Laufergebnisse
Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CSS-Eigenschaft „Border-Top-Right-Radius“.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!