Heim >Web-Frontend >CSS-Tutorial >Wie schreibe ich abgerundeten CSS-Randcode? (Codebeispiel)
Wie schreibe ich abgerundeten CSS-Randcode? (Codebeispiel)
- 藏色散人Original
- 2018-08-13 16:52:514471Durchsuche
In diesem Artikel wird hauptsächlich beschrieben, wie Sie den CSS-Randeffekt erzielen.
Das spezifische Beispiel eines abgerundeten CSS-Randcodes lautet wie folgt:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>css圆角边框代码实例</title>
<meta charset="UTF-8">
<style type="text/css">
div
{
color: white;
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px;
background: #029789;
width:350px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body>
<div>css边框设置使用border-radius 属性即可向元素添加圆角。</div>
</body>
</html>Der Effekt ist wie folgt:
Die wichtigsten hier beteiligten Das Attribut ist der Randradius, mit dem der abgerundete CSS-Rand angepasst werden kann.
Hinweis: So verwenden Sie den Randradius:
border-radius: 1-4 length|% / 1-4 length|%;
Stellen Sie die vier Werte jedes Radius in dieser Reihenfolge ein. Wenn unten links weggelassen wird, ist es dasselbe wie oben rechts. Wenn unten rechts weggelassen wird, ist es dasselbe wie oben links. Wenn oben rechts weggelassen wird, ist es dasselbe wie oben links.
-webkit-border-radius dient der Kompatibilität mit Chrome oder Safari.
-moz-border-radius dient der Firefox-Kompatibilität.
Das Obige ist eine detaillierte Einführung in den abgerundeten CSS-Grenzcode. Ich hoffe, dass es für Freunde in Not hilfreich sein wird.
Das obige ist der detaillierte Inhalt vonWie schreibe ich abgerundeten CSS-Randcode? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!