Heim >Web-Frontend >CSS-Tutorial >So verwenden Sie die CSS-Eigenschaft „Border-Top-Left-Radius'.
So verwenden Sie die CSS-Eigenschaft „Border-Top-Left-Radius'.
- silencementOriginal
- 2019-05-26 14:28:183498Durchsuche
Definition und Verwendung des Attributs „border-top-left-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.
Das Attribut „Border-top-left-radius“ ähnelt dem Attribut
Attribut „border-top-left-radius“: Setzt die obere linke Ecke auf eine abgerundete Ecke oder andere Form
border-bottom-left-radius-Eigenschaft: Setzt die untere linke Ecke auf eine abgerundete Ecke oder eine andere Form
border-bottom-right-radius-Eigenschaft: Setzt die untere rechte Ecke auf eine abgerundete Ecke oder eine andere Form
Syntaxformat des Attributs „border-top-left-radius“
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-top-left-radius Attributwertbeschreibung
Es gibt zwei Attributwerte für den Rand-oben-rechts-Radius. Wenn zwei Attributwerte gleich sind, können Sie einen Attributwert weglassen und der Effekt ist genau der gleiche. 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>Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CSS-Eigenschaft „Border-Top-Left-Radius'.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!