box shadow的参数

2024年1月31日发(作者：)

box shadow的参数

【原创版】

目录

-shadow 概述

-shadow 的参数及其含义

-shadow 的参数值示例

-shadow 的兼容性

正文

box-shadow 概述

在 CSS3 中，盒阴影（box-shadow）属性可以为元素添加一个或多个阴影效果。阴影效果可以使元素看起来具有深度和立体感，从而提升页面的视觉效果。box-shadow 属性可以设置阴影的类型、颜色、模糊半径、偏移和扩展半径等参数。

box-shadow 的参数及其含义

box-shadow 属性的参数如下：

1.水平偏移（必需）：阴影的水平偏移量，正值向右偏移，负值向左偏移。

2.垂直偏移（必需）：阴影的垂直偏移量，正值向下偏移，负值向上偏移。

3.模糊半径（可选）：阴影的模糊程度，值越大，阴影越模糊。默认为 0（锐利的阴影边缘）。

4.扩展半径（可选）：扩大或缩小阴影的尺寸。正值会使阴影变大，负值会使阴影变小。默认为 0（阴影与元素尺寸相同）。

5.颜色（可选）：阴影的颜色。默认为 black。

第 1 页 共 2 页

6.内阴影（可选）：使用 inset 关键字可以将阴影应用在元素内部。

box-shadow 的参数值示例

以下是一个 box-shadow 参数值的示例：

```css

.box {

width: 100px;

height: 100px;

background-color: blue;

box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);

}

```

在这个示例中，元素产生了一个向左和向上偏移的阴影，模糊半径为

10px，阴影颜色为半透明的黑色。

box-shadow 的兼容性

box-shadow 在现代浏览器中具有很好的兼容性，但在一些较旧的浏览器中可能需要使用 vendor 前缀或者使用其他技巧来实现阴影效果。

第 2 页 共 2 页