Wie stelle ich 4 abgerundete Ecken in CSS ein? CSS legt 4 Methoden mit abgerundeten Ecken fest-CSS-Tutorial-php.cn

Wie stelle ich 4 abgerundete Ecken in CSS ein? CSS legt 4 Methoden mit abgerundeten Ecken fest

云罗郡主

Freigeben： 2018-11-08 15:36:33

Original

14286 Leute haben es durchsucht

Wie stelle ich einen abgerundeten CSS-Rahmen für div ein? Wie kann man in CSS 4 abgerundete Ecken festlegen? Dies ist für CSS-Neulinge, die gerade erst angefangen haben, relativ ungewohnt. Wie stellt man also 4 abgerundete Ecken in CSS ein? Werfen wir einen Blick auf die vier in CSS festgelegten Methoden für abgerundete Ecken. [Empfohlenes Lernen: CSS3-Tutorial]

Abgerundete CSS3-Ecken werden verwendet, um dem Körper oder Text mithilfe der Eigenschaft „border-radius“ spezielle farbige Ecken hinzuzufügen. Die einfache Syntax für abgerundete Ecken lautet wie folgt:

#rcorners7 {
   border-radius: 60px/15px;
   background: #FF0000;
   padding: 20px; 
   width: 200px;
   height: 150px; }

Nach dem Login kopieren

Die folgende Tabelle zeigt die möglichen Werte für abgerundete Ecken wie folgt:

Wie stelle ich 4 abgerundete Ecken in CSS ein? CSS legt 4 Methoden mit abgerundeten Ecken fest

Beispiel, Dieses Attribut kann drei Werte haben. Im folgenden Beispiel werden zwei Werte verwendet:

<html>
   <head>
      <style>
         #rcorners1 {
            border-radius: 25px;
            background: #8AC007;
            padding: 20px;
            width: 200px;
            height: 150px;
         }
         #rcorners2 {
            border-radius: 25px;
            border: 2px solid #8AC007;
            padding: 20px; 
            width: 200px;
            height: 150px;
         }
         #rcorners3 {
            border-radius: 25px;
            background: url(/css/images/logo.png);
            background-position: left top;
            background-repeat: repeat;
            padding: 20px; 
            width: 200px;
            height: 150px;
         }
      </style>
   </head>
   <body>
      <p id = "rcorners1">Rounded corners!</p>
      <p id = "rcorners2">Rounded corners!</p>
      <p id = "rcorners3">Rounded corners!</p>
   </body></html>

Nach dem Login kopieren

Der Effekt ist:

Wie stelle ich 4 abgerundete Ecken in CSS ein? CSS legt 4 Methoden mit abgerundeten Ecken fest

Jedes Eckattribut:

Wir können jedes Eckattribut wie im folgenden Beispiel gezeigt angeben:

<html>
   <head>
      <style>
         #rcorners1 {
            border-radius: 15px 50px 30px 5px;
            background: #a44170;
            padding: 20px; 
            width: 100px;
            height: 100px; 
         }
         #rcorners2 {
            border-radius: 15px 50px 30px;
            background: #a44170;
            padding: 20px;
            width: 100px;
            height: 100px; 
         }
         #rcorners3 {
            border-radius: 15px 50px;
            background: #a44170;
            padding: 20px; 
            width: 100px;
            height: 100px; 
         }
      </style>
   </head>
   <body>
      <p id = "rcorners1"></p>
      <p id = "rcorners2"></p>
      <p id = "rcorners3"></p>
   </body><body>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Wie stelle ich 4 abgerundete Ecken in CSS ein? CSS legt 4 Methoden mit abgerundeten Ecken fest

Der Inhalt dieses Artikels befasst sich mit der Frage, wie man in CSS 4 abgerundete Ecken festlegt. CSS legt vier Methoden mit abgerundeten Ecken fest, die einen gewissen Referenzwert haben. Ich hoffe, dass sie für Sie hilfreich sind.

Das obige ist der detaillierte Inhalt vonWie stelle ich 4 abgerundete Ecken in CSS ein? CSS legt 4 Methoden mit abgerundeten Ecken fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!