Heim > Artikel > tägliche Programmierung > Wie erreicht man abgerundete Ränder und kreisförmige Effekte in CSS? (Bild + Video-Tutorial)
Wie erreicht man abgerundete Ränder und kreisförmige Effekte in CSS? (Bild + Video-Tutorial)
- 藏色散人Original
- 2018-09-13 16:41:3713083Durchsuche
Der Effekt abgerundeter CSS-Ränder wird normalerweise in Navigationsleisten oder Eingabeaufforderungsfeldern im Front-End-Webdesign verwendet. Der Effekt, abgerundete Ränder oder abgerundete Bilder über CSS festzulegen, kann dazu führen, dass die gesamte Webseite reichhaltiger aussieht.
In diesem Artikel erfahren Sie, wie Sie CSS verwenden, um den Effekt eines abgerundeten Rahmens festzulegen. Im Folgenden erläutern wir Ihnen das relevante Wissen anhand konkreter Codebeispiele ausführlich.
CSS-Code mit abgerundetem RandDas Beispiel sieht wie folgt aus:
Beispiel 1: CSS-Effekt mit einseitigem abgerundetem Rand
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css圆角边框代码示例</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background: #A6E22B;
margin: 20px auto;
/*实现单边圆角*/
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Im obigen Code erstellen wir ein Quadrat mit einer Seitenlänge von 200. Wenn wir nur einen Rand-Oben-Links-Radius im CSS-Stil von 20 Pixel hinzufügen, wird der Effekt der abgerundeten oberen linken Ecke dieses Div erreicht. Wie unten gezeigt:
Wenn wir weiterhin einen Rand-oben-rechts-Radius im CSS-Stil von 20 Pixeln hinzufügen, wird der Effekt erzielt, dass nur abgerundete Ecken oben hinzugefügt werden . Wie unten gezeigt:
Dann fügen wir weiterhin zwei CSS-Stile hinzu, border-bottom-left-radius und border-bottom-right-radius, also The Der endgültige Effekt des oben im Browser implementierten Codes ist wie folgt:
Haben Sie durch die obige Beschreibungsreihe die wichtigen Wissenspunkte über abgerundete CSS-Ränder entdeckt? Das ist das border-radius-Attribut! Diese Eigenschaft ist eine Abkürzungseigenschaft zum Festlegen der vier border-*-radius-Eigenschaften. Dieses Attribut wird verwendet, um Elementen abgerundete Ränder hinzuzufügen!
Beispiel 2: CSS-Rundumrandungseffekt
/*同时实现四个边圆角*/ border-radius: 100px;
Basierend auf dem HTML-Code von Beispiel 1 fügen wir dem quadratischen div-Block nur einen CSS-Rahmen mit einer Seitenlänge hinzu des Stilattributs 200px -radius und das Festlegen des Werts auf 100px bedeutet, dass der Radius auf 100px festgelegt ist. Der Rendering-Effekt ist wie folgt:
Dieser Artikel ist eine spezielle Einführung in das Festlegen abgerundeter Ränder in CSS. Ich hoffe, er wird Freunden in Not hilfreich sein. Weitere HTML/CSS-Kenntnisse finden Sie auf der chinesischen PHP-Website HTML-Video-Tutorial und CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonWie erreicht man abgerundete Ränder und kreisförmige Effekte in CSS? (Bild + Video-Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!