数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究使用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 `box-shadow`属性为元素的框架添加阴影效果。多个效果可以用逗号分隔进行选择。相对于元素的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)** - 它用于控制阴影的大小。扩展的值决定了扩展的大小。
**颜色 (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>
结论
在本文中，我们首先学习了HTML和CSS是什么，然后了解了`box-shadow`及其各种属性，以及如何使用它来创建带有盒影的手风琴悬停效果作为示例。
浏览量：580
