border-radius-Methode zum Hinzufügen abgerundeter Ränder zu Elementen

border-radius:10px; /* Alle Ecken sind mit einem Radius von 10px abgerundet*/

border-radius: 5px 4px 3px 2px; /* Die vier Radiuswerte sind die obere linke Ecke, die obere rechte Ecke, die untere rechte Ecke und die untere linke Ecke im Uhrzeigersinn*/

Denken Sie nicht, dass Rahmenradiuswerte nur in px-Einheiten ausgedrückt werden können. Sie können auch Prozentsätze oder Ems verwenden, aber die Kompatibilität ist derzeit nicht sehr gut.

Durchgezogener oberer Halbkreis:

Vorgehensweise: Stellen Sie die Höhe auf die Hälfte der Breite ein und stellen Sie nur den Radius der oberen linken und oberen rechten Ecke so ein, dass er der Höhe des Elements entspricht (er kann größer sein).

div{

       Höhe: 50px;/*halbe Breite*/
       Breite: 100px;
     Hintergrund: #9da;
       border-radius:50px 50px 0 0;/*Der Radius sollte mindestens dem Wert von height entsprechen*/
       }

Ausgefüllter Kreis:

Methode: Stellen Sie die Breiten- und Höhenwerte so ein, dass sie konsistent sind (d. h. ein Quadrat), und stellen Sie die vier Eckradiuswerte auf die Hälfte ihrer Werte ein.

Der folgende Code:

div{
     Höhe: 100px;/*dasselbe wie Breiteneinstellung*/
      Breite: 100px;
      Hintergrund: #9da;
      border-radius:50px;/*Die vier Eckradiuswerte sind alle auf die Hälfte des Breiten- bzw. Höhenwerts eingestellt*/
      }

Vollständiger Code

<!doctype html>
  <html>
  <Kopf>
  <meta charset="utf-8">
  <title>Randradius</www.dztcsd.com/title>
  <style type="text/css">
  div.Kreis{
       Höhe: 100px;/*dasselbe wie Breiteneinstellung*/
       Breite: 100px;
       Hintergrund: #9da;
       border-radius:50px;/*Die vier Eckradiuswerte sind alle auf die Hälfte des Breiten- bzw. Höhenwerts eingestellt*/
       }
   /*Aufgabenteil*/
      div.Halbkreis{
        Höhe: 100px;
       Breite: 50px;
       Hintergrund: #9da;
       Randradius:?;
       }

         </Stil>
  </Kopf>
  <Text>
  <div Klasse="Kreis">
  </div>
  <br/>
  <!--Aufgabenbereich-->
  <div Klasse="Halbkreis">
  </div>

    </body>
  </html>

Dies ist das Ende dieses Artikels über die Border-Radius-Methode zum Hinzufügen abgerundeter Ränder zu Elementen. Weitere verwandte Inhalte zu abgerundeten Border-Radius-Rändern finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: So erstellen Sie einen SFTP-Server und einen Image-Server auf einem Linux-Cloud-Server

>>: Detaillierte Erklärung der Webseiten-Screenshot-Funktion in Vue

So installieren Sie MySQL 5.7 unter Ubuntu und konfigurieren den Datenspeicherpfad

border-radius-Methode zum Hinzufügen abgerundeter Ränder zu Elementen

So installieren Sie MySQL 5.7 unter Ubuntu und konfigurieren den Datenspeicherpfad

Grafisches Tutorial zur Installation und Konfiguration von mysql 8.0.18.zip (Windows 64 Bit)

Detaillierte Erklärung der CocosCreator-Optimierung DrawCall

Installieren Sie den NVIDIA-Grafiktreiber unter Ubuntu (einfache Installationsmethode).

Verwendung des Linux-Befehls passwd

Eine kurze Einführung in die MySQL MyCat-Middleware

HTML verwendet reguläre Ausdrücke zum Testen von Tabellenbeispielen

Detaillierte Erklärung der Listendarstellung von Vue

Detaillierte Erklärung langer Transaktionsbeispiele in MySQL

Ein möglicher Fehler, wenn MySQL die Summenfunktion auf der Fensterfunktion ausführt

Artikel empfehlen

Wie versteht JS Daten-URLs?

Grafisches Tutorial zur Installation und Konfiguration von MySQL5.7+ MySQL Workbench unter MAC

Natives JS zum Erzielen von Verzeichnis-Scrolleffekten

Eine kurze Diskussion über den magischen Schrägstrich im Nginx Reverse Proxy

CSS zum Erstellen eines dynamischen sekundären Menüs

Upgrade von MySQL 5.1 auf 5.5.36 in CentOS

Einführung in den glibc-Upgradeprozess für Centos6.5

Leitfaden zur effizienten Nutzung von MySQL-Indizes

Detaillierte Erklärung des MySQL-Covering-Index

Detaillierte Erläuterung der MySQL-Startoptionen und Beispiele für Systemvariablen

JavaScript implementiert ein KI-Tic-Tac-Toe-Spiel durch den Maximum- und Minimum-Algorithmus

So sammeln Sie Nginx-Protokolle mit Filebeat

Installieren und konfigurieren Sie SSH in CentOS7

Detaillierte Erläuterung der Schritte zur Verwendung von ElementUI in tatsächlichen Projekten

Detailliertes Tutorial zum Ausführen von Selenium+Chromedriver auf dem Server