首頁 >web前端 >css教學 >css怎麼設定4個圓角? css設定4個圓角方法

css怎麼設定4個圓角? css設定4個圓角方法

云罗郡主
云罗郡主原創
2018-11-08 14:36:3814302瀏覽

div如何設定css圓角邊框? css設定4個圓角方法有哪些?這對於剛入門的css新手,比較陌生,那麼css怎麼設定4個圓角?下面我們來看看css設定4個圓角方法。 【推薦學習:CSS3教學

CSS3圓角用於透過使用border-radius屬性為主體或文字添加特殊顏色的角。圓角的簡單語法如下:

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

下表顯示了圓角的可能值,如下所示:

css怎麼設定4個圓角? css設定4個圓角方法

##例,

此屬性可以有三個值。以下範例使用兩個值:

<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>

效果如下:

css怎麼設定4個圓角? css設定4個圓角方法

每個角落屬性:

我們可以指定每個角落屬性,如下例所示:

<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>

效果如下:


css怎麼設定4個圓角? css設定4個圓角方法

這篇文章帶給大家的內容是關於css怎麼設定4個圓角? css設定4個圓角方法,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

以上是css怎麼設定4個圓角? css設定4個圓角方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn