如何使用CSS实现带有盒子阴影的手风琴悬停效果

超文本标记语言是HTML所代表的。它既是一个Web页面组合的示例，也是创建Web页面的工具。它由几个组件组成。

它的元素为浏览器提供了渲染内容的指令。层叠样式表（CSS）定义了HTML元素在各种打印和数字媒体（如显示器和其他打印和数字形式）中的外观。使用CSS可以大大减少时间。它允许同时管理多个网页设计。本文将学习如何使用CSS创建带有盒子阴影的手风琴悬停效果。

基本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的特征。

可以使用box-shadow属性从几乎任何元素的框中投射一个投影阴影。如果元素有边框半径，那么box shadow也会采用相同的圆角边。多个文本阴影和多个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 - 必须指定阴影值的垂直位置。使用正值设置框下方的阴影，使用负值设置框上方的阴影。
模糊 - 此可选属性的目的是使框的阴影变模糊。
扩展 - 用于控制阴影的大小。扩展的值确定了扩展的大小。
颜色 - 它是一个控制阴影颜色的选择属性。
内插 - 默认情况下，阴影在框外生成。但我们可以使用内插使阴影在框内部生成。
初始值 - box-shadow属性用于将其设置为默认设置。
继承 - 此特性来自其父级。
无 - 它没有阴影属性，是默认设置。

示例

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

<!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>