二、圆角(border-radius)
2.1、圆角以px为单位
border-radius属性：其值通常为px单位，表示圆角的半径。使用px的话永远是以一个圆形来进行各个角度的切割。
单独设置四个圆角：border-radius: 10px 20px 30px 40px，分别表示左上角、右上角、右下角、左下角。并且可以设置小属性
属性 |
意义 |
border-top-left-radius |
左上角 |
border-top-right-radius |
右上角 |
border-bottom-left-radius |
左下角 |
border-bottom-right-radius |
右下角 |
小案例
需求：使用px单位来将一个正方形变为圆形
<style> * { padding: 0px; margin: 0px; } div { height: 200px; width: 200px; background-color: red; margin: 20px auto; /* 设置圆角:设置为宽高一般则是圆形 */ border-radius: 100px; } </style> <body> <div class="box1"></div> </body>
2.2、圆角以百分比为单位
圆角属性也可以使用百分比做单位，表示圆角起始于每条边的哪里。
两个小案例：
正方形盒子若是设置的border-radius: 50%，就是正圆形。
长方形盒子若是设置的border-radius: 50%，就是椭圆。
注意：想要实现椭圆只能够使用百分比形式实现，使用px来进行赋值无法实现(px值实际上就每个角都使用圆形来进行切割)！
三、盒子阴影(box-shadow)
3.1、基本阴影(四个值)
基本阴影语法：box-shadow：10px 20px 30px rgba(0,0,0,.4)，分别是x偏移(越大越往右偏移)，y偏移(越大越往下偏移)，模糊量(px值越大越模糊)，颜色(阴影颜色，一般设置其透明度)。
3.2、阴影延展(新增一个px值)
阴影延展：box-shadow：10px 20px 30px 40px rgba(0,0,0,.4)，相比较之前多了一个数值就表示的是阴影延展，实际效果就是阴影会向四个方向不断延展。
3.3、内阴影(添加inset关键字)
内阴影：box-shadow属性值前加inset单词，表示内阴影。如：box-shadow：inset 10px 20px 30px 40px rgba(0,0,0,.4)，其实际效果就是阴影向内部延伸。
用途：经常用在电商的按钮触碰上。
3.4、多阴影(,号隔开设置多个)
多阴影：box-shadow属性值可以用逗号隔开多个，表示携带多个阴影，多种阴影进行叠加，包括内阴影以及前面列举的多个。
如：box-shadow：inset 10px 20px 30px 40px rgba(0,0,0,.4), 10px 20px 30px 40px rgba(0,0,0,.4)，通过使用逗号隔开包含多种阴影同时作用到一个标签上。
