Heim > Artikel > Web-Frontend > So verwenden Sie die CSS-Eigenschaft „Border-Bottom-Right-Radius'.
So verwenden Sie die CSS-Eigenschaft „Border-Bottom-Right-Radius'.
- silencementOriginal
- 2019-05-26 14:35:432983Durchsuche
Definition und Verwendung des Attributs „border-bottom-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.
Border-Bottom-Right-Radius-ähnliche Eigenschaften
Border-Top-Left-Radius-Eigenschaft: Legen Sie die obere linke Ecke auf eine abgerundete Ecke oder eine andere Form fest
border-bottom-left-radius-Eigenschaft: Legen Sie die untere linke Ecke auf eine abgerundete Ecke oder andere Formen fest; border-bottom-right-radius-Eigenschaft: Legen Sie die untere rechte Ecke auf eine abgerundete Ecke fest Ecke oder andere Formen;Border-Bottom-Right-Radius-Attributsyntaxformat
CSS-Syntax: Border-Top-Right-Radius:5px 10px;CSS-Syntax: border-top -right-radius:6px;CSS-Syntax: border-top-right-radius:30% 80%;CSS-Syntax: border-top -right-radius:50%;JavaScript-Syntax: object.style.borderTopRightRadius="5px";
Border-bottom-right-radius-Attributwertbeschreibung
border-top- Das Right-Radius-Attribut hat zwei Attributwerte. Wenn die beiden Attributwerte gleich sind, können Sie einen Attributwert weglassen und der Effekt ist genau derselbe. 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.Instanz
<!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>Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CSS-Eigenschaft „Border-Bottom-Right-Radius'.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!