Wie erreicht man abgerundete Ränder und kreisförmige Effekte in CSS? (Bild + Video-Tutorial)-CSS-Kenntnisse-php.cn

Wie erreicht man abgerundete Ränder und kreisförmige Effekte in CSS? (Bild + Video-Tutorial)

藏色散人

Freigeben： 2018-09-13 16:41:37

Original

13124 Leute haben es durchsucht

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>

Nach dem Login kopieren

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:

Wie erreicht man abgerundete Ränder und kreisförmige Effekte in CSS? (Bild + Video-Tutorial)

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:

Wie erreicht man abgerundete Ränder und kreisförmige Effekte in CSS? (Bild + Video-Tutorial)

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:

Wie erreicht man abgerundete Ränder und kreisförmige Effekte in CSS? (Bild + Video-Tutorial)

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;

Nach dem Login kopieren

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:

Wie erreicht man abgerundete Ränder und kreisförmige Effekte in CSS? (Bild + Video-Tutorial)

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!