css3之border-radius學習
- 2019 年 12 月 27 日
- 筆記
border-radius圓角邊框是CSS3的新屬性，以前網頁設計開發中要實現元素的圓角邊框，通常是用背景圖片來實現的。現在我們只需要給元素添加border-radius屬性即可。
下面是幾個栗子：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Template</title> <style> .box{ width: 100px; height: 100px; border: solid 10px #999; margin: 10px; float: left; } .border-1{ border-radius: 10px; } .border-2{ border-radius: 100px; } .border-3{ border-top-left-radius:10px; border-top-right-radius:10px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; } .border-4{ border-radius: 50px 30px 100px 90px/ 50px 50px 100px 10px; } .border-5{ border-top-left-radius: 100px 100px; border-top-right-radius: 100px 100px; } .border-6{ border-top-left-radius: 100px/100px; border-top-right-radius: 100px/10px; border-bottom-left-radius: 10px/100px; border-bottom-right-radius: 100px 100px; } </style> </head> <body> <!-- 無邊框 --> <div class="box"></div> <!-- 常規邊框 --> <div class="box border-1"></div> <!-- 圓形 --> <div class="box border-2"></div> <!-- 特殊邊框 --> <div class="box border-3"></div> <!-- 特殊邊框 --> <div class="box border-4"></div> <!-- 特殊邊框 --> <div class="box border-5"></div> <!-- 特殊邊框 --> <div class="box border-6"></div> </body> </html>
對應效果：
