border-radius 和 box-shadow 是两个非常常用的属性，用于创建圆角边框和阴影效果。
border-radius 属性
border-radius 属性用于创建元素的圆角边框效果，它可以接受一个或多个值来指定每个角的圆角大小。语法如下：
border-radius: [top-left] [top-right] [bottom-right] [bottom-left];
上面是 border-radius 属性的简写属性，当然你也可以单独去描述每个角的属性
border-radius-top-left:0
border-radius-top-right:0
border-radius-bottom-right:0
border-radius-bottom-left:0
其中，每个值可以是一个长度值（如 px、em 等单位），也可以是一个百分比值（相对于元素尺寸的百分比），计算值 calc()， 还可以是一个特殊的关键字值，如以下几种：
- inherit：从父元素继承圆角大小；
- initial：使用默认的圆角大小；
- unset：取消所有圆角设置。
如果只指定一个值，则表示四个角都使用同样的圆角大小
/* 四个角都使用相同的圆角大小 */
border-radius: 4px;
/* 等价于 */
border-radius: 4px 4px 4px 4px;
/* 等价于 */
border-radius-top-left: 4px;
border-radius-top-right: 4px;
border-radius-bottom-right: 4px;
border-radius-bottom-left: 4px;
如果指定两个值，则表示上下两个相对的角使用一个值，左右两个相对的角使用另一个值;
/* 上下两个相对的角使用一个值，左右两个相对的角使用另一个值 */
border-radius: 4px 8px;
/* 等价于 */
border-radius: 4px 8px 4px 8px;
如果指定三个值，表示分别设置左上角、右上角和右下角的圆角半径大小，左下角的圆角半径大小默认与右上角相同
border-radius: 4px 8px 4px;
/* 等价于 */
border-radius: 4px 8px 4px 8px;
如果指定四个值，则表示每个角都使用不同的圆角大小。
/* 每个角都使用不同的圆角大小 */
border-radius: 4px 6px 8px 10px;
box-shadow 属性
box-shadow 属性用于创建元素的阴影效果，它可以接受多个值来指定阴影的位置、大小、颜色和模糊半径等属性。语法如下：
box-shadow: [horizontal-offset] [vertical-offset] [blur-radius] [spread-radius] [color] [inset];
其中，每个值的含义如下：
- horizontal-offset：阴影的水平偏移量，可以是正数（表示向右偏移）或负数（表示向左偏移），默认值为 0；
- vertical-offset：阴影的垂直偏移量，可以是正数（表示向下偏移）或负数（表示向上偏移），默认值为 0；
- blur-radius：阴影的模糊半径，可以是一个长度值（如 px、em 等单位），表示模糊的程度，值越大越模糊，默认值为 0；
- spread-radius：阴影的扩散半径，可以是一个长度值（如 px、em 等单位），表示阴影的大小，值越大阴影越大，默认值为 0；
- color：阴影的颜色，可以是一个颜色值或关键字值，表示阴影的颜色，默认值为黑色；
- inset：可选值，表示阴影是否为内阴影（即在元素内部），默认为外阴影（即在元素外部）。
以下是一些实列
/* 创建一个黑色、模糊半径为10px、大小为0px的外阴影 */
box-shadow: 0px 0px 10px 0px black;
/* 创建一个红色、模糊半径为5px、大小为10px的外阴影 */
box-shadow: 0px 0px 5px 10px red;
/* 创建一个白色、模糊半径为0px、大小为10px的内阴影 */
box-shadow: inset 0px 0px 0px 10px white;