给你的元素锦上添花：CSS阴影教程

前端

2022-11-12 23:02:17

CSS 阴影：让你的元素脱颖而出

在现代网页设计中，阴影效果是提升元素视觉效果的一种流行趋势。它可以为你的设计增添深度和层次感。在 CSS 中，你可以使用 “box-shadow” 属性轻松实现阴影效果。

认识 “box-shadow” 属性

“box-shadow” 属性为元素添加周围的阴影效果，它接受多个值，每个值代表阴影的不同属性，包括：

水平偏移：阴影在水平方向上的偏移距离。
垂直偏移：阴影在垂直方向上的偏移距离。
模糊半径：阴影的模糊程度。
阴影颜色：阴影的颜色。

语法格式：简单易懂

“box-shadow” 属性的语法格式如下：

box-shadow: h-offset v-offset blur-radius spread-radius shadow-color;

参数说明：

h-offset：阴影在水平方向上的偏移距离，正值向右偏移，负值向左偏移。
v-offset：阴影在垂直方向上的偏移距离，正值向下偏移，负值向上偏移。
blur-radius：阴影的模糊程度，值越大，阴影越模糊。
spread-radius：阴影的扩散半径，值越大，阴影越宽。
shadow-color：阴影的颜色，可以是十六进制颜色值、RGB 值或 RGBA 值。

浏览器兼容性：跨平台支持

“box-shadow” 属性在各大浏览器中的兼容性如下：

Chrome：完全兼容
Firefox：完全兼容
Safari：完全兼容
Edge：完全兼容
Internet Explorer：IE9+ 完全兼容

代码示例：亲自动手

/* 为元素添加一个简单的阴影效果 */
.element {
  box-shadow: 5px 5px 5px #888888;
}

/* 为元素添加一个更复杂的阴影效果 */
.element {
  box-shadow: 10px 10px 10px #888888,
              5px 5px 5px #aaaaaa;
}

/* 为元素添加一个带扩散效果的阴影 */
.element {
  box-shadow: 10px 10px 10px 5px #888888;
}

/* 为元素添加一个带颜色效果的阴影 */
.element {
  box-shadow: 10px 10px 10px #ff0000;
}