语法：
border - radius : length ;
1
2
参数值可以为数值或百分比的形式。
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%。
如果是个矩形设置为高度的一半就可以做 。
该属性是一个简写属性，可以跟四个值，分别代耘上角、右上角、右下角、左下角。
分开写： border - top - left - radius 、 border - top - right - radius 、 border- bottom - right - radius 和border - bottom - left - radius。
1、案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 正方形->圆形,如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%。 */ .demo1{ display: inline-block; width: 200px; height: 200px; background-color: skyblue; border-radius: 50%; /*100px*/ } /* 如果是个矩形设置为高度的一半就可以做 。 */ .demo2{ display: inline-block; width: 400px; height: 100px; background-color: pink; border-radius: 50px; } .demo3{ display: inline-block; width: 400px; height: 100px; background-color: rgb(211, 31, 61); border-radius: 10px; } </style> </head> <body> <div class="demo1"> </div> <div class="demo2"> </div> <div class="demo3"> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 正方形->圆形,如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%。 */ .demo1{ width: 200px; height: 200px; background-color: skyblue; border-radius: 50%; /*100px*/ box-shadow: 10px 10px 10px 10px rgba(35, 4, 4, .4); } </style> </head> <body> <div class="demo1"> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .demo1{ font-size: 30px; color:orange; text-shadow: 5px 5px 6px rgba(17, 1, 1, .4) ; } </style> </head> <body> <div class="demo1"> 勇敢牛牛，不怕困难 </div> </body> </html>
