码农教程 - 一技在手,衣食无忧! tools

目录

CSS 盒子阴影

❮ 上一节 下一节 ❯

CSS box-shadow 属性

CSSbox-shadow属性用于向元素应用一个或多个阴影。

指定水平和垂直阴影

在最简单的使用中，您只需指定水平和垂直阴影。阴影的默认颜色是当前文本颜色。

带有盒子阴影的 <div> 元素

示例

指定水平和垂直阴影：

div {
  box-shadow: 10px 10px;
}
亲自试一试 »

指定阴影的颜色

这个color参数定义阴影的颜色。

带有浅蓝色框阴影的 <div> 元素

示例

指定阴影的颜色：

div {
  box-shadow: 10px 10px lightblue;
}
亲自试一试 »

为阴影添加模糊效果

这个blur参数定义模糊半径。数字越高，阴影越模糊。

带有 5px 模糊浅蓝色框阴影的 <div> 元素

示例

为阴影添加模糊效果：

div {
  box-shadow: 10px 10px 5px lightblue;
}
亲自试一试 »

设置阴影的扩散半径

这个spread参数定义传播半径。正值会增加阴影的大小，负值会减小阴影的大小。

具有模糊的浅蓝色框阴影的 <div> 元素，其扩散半径为 12px

示例

设置阴影的扩散半径：

div {
  box-shadow: 10px 10px 5px 12px lightblue;
}
亲自试一试 »

设置插入参数

这个inset参数将阴影从外部阴影（开始）更改为内部阴影。

带有模糊、浅蓝色、内嵌框阴影的 <div> 元素

示例

添加插入参数：

div {
  box-shadow: 10px 10px 5px lightblue inset;
}
亲自试一试 »

添加多个阴影

一个元素也可以有多个阴影：

示例

div {
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}
亲自试一试 »

牌

您还可以使用box-shadow用于创建纸质卡片的属性：

1

2021 年 1 月 1 日

Norway

挪威哈当厄尔

示例

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}
尝试一下（文本卡）» 尝试一下（图片卡）»

通过练习测试一下

练习:

为 <h1> 元素设置 "2px" 水平文本阴影和 "2px" 垂直文本阴影。

<style>
h1 {
  : 2px 2px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

开始练习

CSS 阴影属性

下表列出了 CSS 阴影属性：

Property Description
box-shadow Adds one or more shadows to an element
text-shadow Adds one or more shadows to a text

❮ 上一节 下一节 ❯