如何用CSS为DIV创建阴影？如何实现元素内部阴影？

一、元素外侧阴影 #

你之前试的shadow: 10px black;没效果，是因为CSS里根本没有shadow这个属性，正确的属性是box-shadow，它能灵活控制阴影的偏移、模糊度、范围和颜色。

基础用法示例：

#element {
  /* 水平偏移 垂直偏移 模糊半径 阴影颜色 */
  box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
}

各参数作用：

• 第一个值：水平方向偏移（正数向右，负数向左）
• 第二个值：垂直方向偏移（正数向下，负数向上）
• 第三个值：可选，模糊半径（数值越大，阴影边缘越柔和）
• 第四个值：可选，扩散半径（正数扩大阴影范围，负数缩小）
• 最后一个值：阴影颜色（支持十六进制、RGB/RGBA、颜色名称）

如果只需要简单的无模糊纯色阴影，写法可以简化：

#element {
  box-shadow: 10px 10px black;
}

二、元素内部阴影 #

要在元素内部加阴影，只要在box-shadow开头加上inset关键字，就能把阴影从外侧转到内侧。

示例代码：

#element {
  /* inset 水平偏移 垂直偏移 模糊半径 阴影颜色 */
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

上面的0 0让阴影均匀分布在元素内部四周，调整模糊半径可以控制阴影的扩散程度，你也可以修改偏移值做出单侧内部阴影的效果，比如inset 0 5px 10px rgba(0,0,0,0.3)会在顶部内侧生成阴影。

内容的提问来源于stack exchange，提问作者macowo1364