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>
：
以上是對圓角的詳細介紹，初學者可以多去嘗試練習！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
