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

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

Artikel empfehlen

So rufen Sie das Kennwort für MySQL 8.0.22 auf dem Mac ab

Neueste Version von MySQL 8.0.22 zur Kennwortwied...

10 hervorragende Web-UI-Bibliotheken/Frameworks

1. IT Mill-Toolkit IT Mill Toolkit ist ein Open-S...

Drei Möglichkeiten zum Zeichnen einer Herzform mit CSS

Im Folgenden stellen wir drei Möglichkeiten zum Z...

Erfahren Sie mehr über die Verwendung regulärer Ausdrücke in JavaScript

Inhaltsverzeichnis 1. Was ist ein regulärer Ausdr...

Detaillierte Schritte zum Einrichten des Hosts Nginx + Docker WordPress Mysql

Umfeld Linux 3.10.0-693.el7.x86_64 Docker-Version...

Analyse und Lösung der Ursache für den Verlust des Webseitenstils durch das automatische Ausfüllen von Formularen durch den Browser

Vom Backend zum Frontend: was für eine Tragödie. A...

Nach dem Klickereignis des HTML-Hyperlinks a wird zur Adresse gesprungen, auf die href zeigt.

Manchmal müssen wir den Hyperlink <a> anstel...

Definition und Verwendung des MySQL-Cursors

Erstellen eines Cursors Erstellen Sie zunächst ei...

Ein Beispiel für die Verwendung einer MySQL-Anweisung, um die Anzahl der von verschiedenen Ganzzahlen belegten Bytes sowie deren Maximal- und Minimalwerte herauszufinden

Direkt codieren: Wählen Sie „bigint unsigned“ als...

So konfigurieren Sie die OpenWRT-Entwicklungsumgebung auf Ubuntu 18.04 (physische Maschine)

1. Installieren Sie eine virtuelle Maschine (phys...

Tutorial-Diagramm zur Verwendung von Jenkins für die automatisierte Bereitstellung unter Windows

Heute werden wir darüber sprechen, wie wir Jenkin...

Eine vorläufige Studie zu zusammengesetzten Primärschlüsseln und gemeinsamen Primärschlüsseln in SQL-Anweisungen

1. Zusammengesetzter Primärschlüssel Der sogenann...

So installieren Sie MySQL 8.0.13 in Alibaba Cloud CentOS 7

1. Laden Sie das MySQL-Installationspaket herunte...

So ändern Sie den iTunes-Sicherungspfad unter Windows

0. Vorbereitung: • Schließen Sie iTunes • Beenden...

Wie können wir für Jiedaibao werben, damit sich jeder anmeldet? Methoden und Fähigkeiten zur Förderung von Jiedaibao

Jiedaibao ist eine Softwareplattform für Handykre...