如何在 CSS 中使用 box-shadows 创建手风琴悬停效果

cssweb developmentfront end technology更新于 2025/1/13 22:36:17

超文本标记语言 (Hyper Text Markup Language) 就是 HTML。它既是网页结构的示例，也是创建网页的工具。它由多个组件组成。

它的元素向浏览器提供如何渲染内容的指令。CSS，即层叠样式表，定义了 HTML 元素在各种印刷和数字媒体(例如显示器和其他印刷和数字形式)中的显示方式。使用 CSS 可以显著节省时间，并允许同时管理多个网页设计。本文，我们将学习如何在 CSS 中使用 box-shadows 创建手风琴悬停效果。

基本 HTML 文档

<!DOCTYPE html>
<html>
<head>
   <title>Page Title</title>
</head>
<body>
   <h1>My First Heading</h1>
   <p>My first paragraph.</p>
</body>
</html>

方法

要在元素周围创建阴影，请使用 CSS box-shadow 属性。

可以使用 box-shadow CSS 属性为元素的框架添加阴影效果。您可以选择多个效果并用逗号分隔。相对于元素的 X 和 Y 偏移量、模糊半径和扩展半径以及颜色都是框阴影的特征。

您可以使用 box-shadow 属性从几乎任何元素的框架投射阴影。如果元素上指定了边框半径，则框阴影会采用相同的圆角边缘。多个文本阴影和多个框阴影具有相同的 Z 轴顺序。

CSS box-shadow 属性的语法如下。

box-shadow: x-offset y-offset blur-radius spread-radius color;

CSS box-shadow 属性

如果我们更深入地了解 box-shadow 的含义，就会知道 box-shadow CSS 属性用于为元素的框架赋予阴影效果。元素的框架与其之间以逗号分隔，可能会受到各种影响。相对于元素的 X 和 Y 偏移量、模糊和扩展半径、颜色以及框阴影都可以用来表征它。

默认值 − None 是其默认值。
属性值 − 以下示例详细展示了所有特性。
x-offset − 需要设置阴影的水平位置。阴影在框的右侧使用正值设置，在框的左侧使用负值设置。
y-offset − 必须指定阴影值的垂直位置。框下方的阴影使用正值设置，框上方的阴影使用负值设置。
Blur − 此可选属性用于模糊框的阴影。
Spread − 用于控制阴影的大小。Spread 的值决定了 Spread 的大小。
Color − 这是一个控制阴影颜色的选择属性。
Inset − 默认情况下，阴影在框外部生成。但是，我们可以使用 inset 在盒子内部创建阴影。
Initial− box-shadow 属性用于将其设置为默认设置。
Inherit− 此特性来自其父级。
None− 它没有阴影属性，是默认设置。

示例

以下是创建手风琴悬停效果的示例 –

<!DOCTYPE html>
<html>
<body style="text-align: center">
   <style>
      .info {
         position: relative;
         max-width: 100%;
         font-size: 60px;
      }
      .info label, .info-content {
         padding: 15px;
         display: block;
      }
      .info label {
         background: #9c9c9c;
      }
      .info-content {
         background: #fc838b;
         display: none;
      }
      .info input {
         display: none;
      }
      .info input:hover ~ .info-content {
         display: block;
         border:solid;
      }
      .info label:hover {
         box-shadow: inset 0 0 15px red;
      }
   </style>
   <div class="info">
      Hover mouse over the div to see the effect of box-shadow. After clicking on the button you will see more content.
      <input id="info1" type="checkbox" />
      <label for="info1">Click Here</label>
      <div class="info-content">
         create an accordion hover effect with box-shadows in CSS.
      </div>
   </div>
</body>
</html>