插件窝 干货文章 css怎么加阴影

css怎么加阴影

阴影 shadow 添加 效果 637    来源:    2023-12-04

在 CSS 中,可以使用 box-shadow 属性来为元素添加阴影效果。这个属性可以接受多个参数,用于控制阴影的颜色、大小、模糊程度和偏移量。下面是一个示例:

div {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

在上面的示例中,box-shadow 属性的参数分别为水平偏移量、垂直偏移量、模糊半径和阴影颜色。这个示例会在 div 元素的右下角添加一个 4 像素大小、颜色为半透明黑色的阴影。

你也可以为元素添加多个阴影效果,只需要用逗号分隔不同的阴影参数即可。例如:

div {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), -2px -2px 4px rgba(255, 255, 255, 0.3);
}

上面的示例会在 div 元素的右下角和左上角分别添加两个阴影效果。

除了 box-shadow 属性,CSS 还提供了其他一些属性来控制阴影效果,例如 text-shadow 用于为文本添加阴影效果,以及 drop-shadow 用于为 SVG 元素添加阴影效果。

希望以上内容对你有所帮助!