如何用CSS的box-shadow实现div元素的单边内阴影和三边外阴影？

要实现一个 div 元素的单边内阴影和三边外阴影，可以使用 CSS 的 box-shadow 属性。box-shadow 允许你为元素添加多个阴影效果，每个阴影可以有不同的偏移、模糊半径、扩展半径和颜色。

实现单边内阴影和三边外阴影的步骤：

1. 单边内阴影：通过设置 inset 关键字来实现内阴影，并通过调整 x-offset 和 y-offset 来控制阴影的位置。

2. 三边外阴影：通过设置多个 box-shadow 值来实现外阴影，分别控制上、左、右三边的阴影效果。

示例代码：

div {
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
    position: relative;
    margin: 50px auto;
    padding: 20px;
    box-shadow: 
        /* 单边内阴影（底部） */
        inset 0 -10px 10px -10px rgba(0, 0, 0, 0.5),

        /* 三边外阴影（上、左、右） */
        0 -10px 10px -5px rgba(0, 0, 0, 0.5),
        -10px 0 10px -5px rgba(0, 0, 0, 0.5),
        10px 0 10px -5px rgba(0, 0, 0, 0.5);
}

解释：

1. 单边内阴影（底部）：

   • inset：表示内阴影。
   • 0 -10px：阴影的偏移量，0 表示水平方向不偏移，-10px 表示垂直方向向上偏移 10px。
   • 10px：模糊半径，控制阴影的模糊程度。
   • -10px：扩展半径，负值表示阴影向内收缩。
   • rgba(0, 0, 0, 0.5)：阴影颜色和透明度。

2. 三边外阴影（上、左、右）：

   • 第一个阴影：0 -10px 10px -5px rgba(0, 0, 0, 0.5)，表示上边的外阴影。
   • 第二个阴影：-10px 0 10px -5px rgba(0, 0, 0, 0.5)，表示左边的外阴影。
   • 第三个阴影：10px 0 10px -5px rgba(0, 0, 0, 0.5)，表示右边的外阴影。

结果：

• div 元素的底部会有内阴影效果。
• div 元素的上、左、右三边会有外阴影效果。

注意事项：

• 你可以根据需要调整阴影的偏移量、模糊半径、扩展半径和颜色，以达到你想要的效果。
• 如果不需要某一边的阴影，可以去掉对应的 box-shadow 值。

通过这种方式，你可以灵活地控制 div 元素的阴影效果，实现复杂的视觉效果。