CSS3中border-radius怎麼使用?執行個體講解用border-radius畫一個圓

來源:互聯網
上載者:User
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;}

樣本2:給兩個值

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

樣本3:給三個值

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

樣本4:給四個值

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


舉例:用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>

以上是對圓角的詳細介紹,初學者可以多去嘗試練習!

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。