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!
Bytefont-Nutzung
Welche Sortiermethoden gibt es?
Gründe, warum der Touchscreen eines Mobiltelefons ausfällt
Die Rolle von Isset in PHP
Es gibt mehrere Möglichkeiten, die CSS-Position zu positionieren
So aktualisieren Sie Douyin
So lösen Sie eine Cad-Vergiftung
Häufig verwendete Codes in der HTML-Sprache
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
