box-shadow好看样式

`box-shadow`是一个CSS属性，用于给HTML元素添加阴影效果，可以增强页面视觉效果、突出显示元素边界等。它的语法如下：

element {
  box-shadow: x-offset y-offset blur spread-color color;
}

这里各个参数的作用如下：

1. `x-offset`: 水平偏移量。正值向右偏移，负值向左偏移。
2. `y-offset`: 垂直偏移量。正值向下偏移，负值向上偏移。
3. `blur`: 阴影模糊程度，默认为0，表示无模糊效果。
4. `spread-color`: 影响阴影大小的比例，默认为0，表示只增加亮度。
5. `color`: 设置阴影的颜色，默认为当前元素背景色的反色。

例如，你可以设置如下样式以获得美观的阴影效果：

.button {
  width: 10em; /* 定义按钮宽度 */
  height: 3em; /* 定义按钮高度 */
  background-color: #4CAF50; /* 按钮背景颜色 */
  border-radius: 8px; /* 边角半径 */
  padding: 1em; /* 内边距 */
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); /* 添加阴影 */
}

/* 高级样式示例 */
.button:hover {
  box-shadow: inset 0px 0px 0px 10px rgba(0, 0, 0, 0.2), 2px 2px 4px rgba(0, 0, 0, 0.5);
}

在这个例子中，`.button` 元素将拥有标准的水平和垂直阴影偏移，并且阴影范围从底部边缘延伸到元素之外一定距离。当鼠标悬停在按钮上时，阴影效果会变得更加明显，并且内部阴影也增加了一层，以增强悬浮状态的视觉反馈。