I.圆角边框

①原理

eg.不同length的对比
100px 50px
代码：
<!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>新浪导航</title><style>* {margin: 0;padding: 0;}div {display: inline-block;width: 200px;height: 300px;background-color: aquamarine;margin: 100px;text-align: center;line-height: 300px;font-size: 25px;font-family: 'Times New Roman', Times, serif;}.box1 {border-radius: 100px;}.box2 {border-radius: 50px;}</style></head><body><div class="box1">用例1</div><div class="box2">用例2</div></body></html>

②使用

PS.1）超出50%的按50%的效果算；

eg.效果：
200px 50px
代码：
<!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>新浪导航</title><style>* {margin: 0;padding: 0;}div {display: inline-block;width: 200px;height: 300px;background-color: aquamarine;margin: 100px;text-align: center;line-height: 300px;font-size: 25px;font-family: 'Times New Roman', Times, serif;}.box1 {border-radius: 100%;}.box2 {border-radius: 50%;}</style></head><body><div class="box1">用例1</div><div class="box2">用例2</div></body></html>

2）矩形+length=1/2*height→圆角矩形

eg.效果：
1/2width 1/2height
代码：
<!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>新浪导航</title><style>* {margin: 0;padding: 0;}div {display: inline-block;width: 100px;height: 300px;background-color: aquamarine;margin: 100px;text-align: center;line-height: 300px;font-size: 25px;font-family: 'Times New Roman', Times, serif;}.box1 {border-radius: 50px;}.box2 {border-radius: 150px;}</style></head><body><div class="box1">用例1</div><div class="box2">用例2</div></body></html>
疑惑qwq！
为什么1/2宽和1/2高的效果是一样的啊？~~←我还以为宽的那个会更不明显一点的ಥ_ಥ！！！~~
~~希望有大佬能解答一下qwq！！！~~

③圆形、圆角矩形及不同圆角的实现

代码：

<!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>新浪导航</title><style>* {margin: 0;padding: 0;}div {display: inline-block;background-color: aquamarine;margin: 100px 25px;text-align: center;font-size: 25px;font-family: 'Times New Roman', Times, serif;}.box1 {width: 300px;height: 300px;line-height: 300px;border-radius: 50%;}.box2 {width: 300px;height: 100px;line-height: 100px;border-radius: 50px;}.box3 {width: 300px;height: 500px;line-height: 500px;border-radius: 10px 50px 20px 100px;}</style></head><body><div class="box1">用例1——圆形</div><div class="box2">用例2——圆角矩形</div><div class="box3">用例3——不同圆角</div></body></html>

II.盒子阴影

h→正右负左，v→正上负下，spread→正大负小

PS. div也可以有:hover

eg.代码：
<!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>新浪导航</title><style>* {margin: 0;padding: 0;}div {display: inline-block;background-color: aquamarine;margin: 100px;text-align: center;font-size: 30px;font-family: 'Times New Roman', Times, serif;width: 200px;height: 200px;line-height: 200px;}div:hover {box-shadow: 10px 30px blue inset;}</style></head><body><div>影子样例</div></body></html>
效果：~~一截图把鼠标截没了qwq！~~

III.文字阴影

eg.代码：
<!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>p {text-align: center;color: aqua;font-size: 80px;font-weight: 700;font-family: 'Times New Roman', Times, serif;text-shadow: 10px 10px 5px blueviolet;}</style></head><body><P>字体样例</P></body></html>
效果：

恭喜看到这的小伙伴，你已经完成 CSS第四天的学习了~！

下面进入第五天的学习吧(★ ω ★)→第五天

~~有用的话就点赞评论收藏嗷！！~~