資料結構
網路
關係資料庫管理系統 (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
