css怎麼設定4個圓角？ css設定4個圓角方法-css教學-PHP中文網

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

云罗郡主

發布： 2018-11-08 15:36:33

原創

14308 人瀏覽過

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個圓角方法