CSS3中border-radius怎麼使用？實例講解用border-radius畫一個圓-css教學-PHP中文網

CSS3中border-radius怎麼使用？實例講解用border-radius畫一個圓

yulia

發布： 2018-09-07 13:53:40

原創

3665 人瀏覽過

CSS3中border-radius用來實現圓角的效果，以下詳細介紹它的用法，最後用實例講解，如何用border-radius畫一個圓。

border-radius 屬性是一個簡寫屬性，用來設定四個 border-*-radius 屬性。
註：如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。它的值可以是長度值，也可以是百分之百。
當給四個值時，分別是左上角，右上角，右下角，左下角。即border-top-left-radius ， border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius
當給三個值時，分別代表左上角，（右上角、左下角），右下角
當給兩個值時，分別代表（左上角、右下角），（右上角、左下角）
當給一個值時，代表四個角一樣的效果

範例1：給一個值

div{width: 150px;height: 150px;border-radius: 15%;background: red;}

登入後複製

效果圖：

CSS3中border-radius怎麼使用？實例講解用border-radius畫一個圓

範例2：給兩個值

div{width: 150px;height: 150px;border-radius: 5% 15%;background: red;}

登入後複製

效果圖：

CSS3中border-radius怎麼使用？實例講解用border-radius畫一個圓

範例3：給三個值

div{width: 150px;height: 150px;border-radius: 5% 15% 30%;background: red;}

登入後複製

效果圖：

CSS3中border-radius怎麼使用？實例講解用border-radius畫一個圓

##範例4：給四個值

div{width: 150px;height: 150px;border-radius: 5% 15% 30% 45%;background: red;}

登入後複製

效果圖：

CSS3中border-radius怎麼使用？實例講解用border-radius畫一個圓

範例：用border-radius作出一個圓

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .a1{width: 200px;height: 200px;background: beige;text-align:
center;line-height: 200px;font-size: 50px;}
   .a2{width: 200px;height: 200px;background: pink;border-radius:
50%;}
  </style>
 </head>
 <body>
  <div class="a1">
   <div class="a2">HELLO</div>
  </div>
 </body>
</html>

登入後複製

效果圖：