CSS 如何用盒状阴影创建一个手风琴悬停效果

超文本标记语言就是HTML。它既是一个关于如何拼凑网页的例子，也是一个创建网页的工具。它是由几个组成部分组成的。

它的元素向浏览器提供如何呈现内容的指令。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的CSS属性添加阴影效果。可以选择多个效果，并以逗号分隔。与元素相关的X和Y偏移量、模糊和扩散半径以及颜色，都是盒状阴影的特征。

你可以用盒状阴影属性从几乎任何元素的框架中投下一个阴影。如果在有边框半径的元素上提供了边框半径，那么盒状阴影也会采用同样的圆角边缘。多个文本阴影和多个盒状阴影都有相同的Z-ordering。

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

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

CSS盒状阴影属性

如果我们更深入地了解什么是盒状阴影，我们就知道盒状阴影CSS属性是用来给一个元素的框架以阴影的外观。元素的框架，用逗号隔开，可以受到各种影响。与元素相关的X和Y偏移量、模糊和扩散半径、颜色和框的阴影都可以用来描述它。

默认值 – 无是其默认值。
属性值– 通过下面的样本，所有的特征都被详细地呈现出来。
x-offset – 设置阴影的水平位置是必要的。阴影在盒子的右边使用正值设置，在盒子的左边使用负值设置。
y-offset – 阴影值的位置必须在垂直方向上指定。盒子下面的阴影使用正值来设置，而盒子上面的阴影使用负值来设置。
Blur – 这个可选的属性的目的是模糊盒子的阴影。
Spread – 它被用来控制阴影的大小。展开的值决定了展开的大小。
Color – 这是一个选择属性，用来控制阴影的颜色。
Inset – 默认情况下，阴影会在盒子外面产生。然而，我们可以使用嵌套使阴影在盒子里面。
Initial – 盒状阴影属性用于将其设置为默认设置。
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>