- border-radius 介绍 ```
```
- border-radius 练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 200px; height: 200px; border: 1px solid red; margin: 20px auto; text-align: center; line-height: 200px; color: #ccc; font-size: 50px; } .box:nth-child(1) { border-radius: 100px; } /* 如果是动态高度的话用百分比适配会更合适 */ .box:nth-child(2) { border-radius: 50%; } .box:nth-child(3) { border-radius: 200px 0 0 0; } .box:nth-child(4) { height: 100px; line-height: 100px; border-radius: 100px/50px; } .box:nth-child(5) { width: 100px; border-radius: 50%; } </style> </head> <body> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> </body> </html>
