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

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

单边内阴影

要实现单边内阴影，可以使用inset关键字来创建内阴影。例如，如果你想在元素的底部添加内阴影，可以这样写：

.box {
    width: 200px;
    height: 200px;
    background-color: #fff;
    box-shadow: inset 0 -10px 10px -10px rgba(0, 0, 0, 0.5);
}

解释： - inset：表示阴影是内阴影。 - 0 -10px：表示阴影在垂直方向上向下偏移10px，水平方向上不偏移。 - 10px：表示阴影的模糊半径。 - -10px：表示阴影的扩展半径（负值表示阴影向内收缩）。 - rgba(0, 0, 0, 0.5)：表示阴影的颜色和透明度。

三边外阴影

要实现三边外阴影（例如左、右、下三边），可以使用多个box-shadow值，每个值对应一个边的阴影。例如：

.box {
    width: 200px;
    height: 200px;
    background-color: #fff;
    box-shadow: 
        -10px 10px 10px -10px rgba(0, 0, 0, 0.5), /* 左边阴影 */
        10px 10px 10px -10px rgba(0, 0, 0, 0.5),  /* 右边阴影 */
        0 10px 10px -10px rgba(0, 0, 0, 0.5);     /* 下边阴影 */
}

解释： - -10px 10px：表示左边阴影在水平方向上向左偏移10px，垂直方向上向下偏移10px。 - 10px 10px：表示右边阴影在水平方向上向右偏移10px，垂直方向上向下偏移10px。 - 0 10px：表示下边阴影在垂直方向上向下偏移10px，水平方向上不偏移。 - 10px：表示阴影的模糊半径。 - -10px：表示阴影的扩展半径（负值表示阴影向内收缩）。 - rgba(0, 0, 0, 0.5)：表示阴影的颜色和透明度。

综合示例

如果你想在一个元素上同时实现单边内阴影和三边外阴影，可以将上述代码结合起来：

.box {
    width: 200px;
    height: 200px;
    background-color: #fff;
    box-shadow: 
        inset 0 -10px 10px -10px rgba(0, 0, 0, 0.5), /* 底部内阴影 */
        -10px 10px 10px -10px rgba(0, 0, 0, 0.5),    /* 左边外阴影 */
        10px 10px 10px -10px rgba(0, 0, 0, 0.5),     /* 右边外阴影 */
        0 10px 10px -10px rgba(0, 0, 0, 0.5);        /* 下边外阴影 */
}

这样，你就可以在一个元素上同时实现单边内阴影和三边外阴影的效果了。