資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 CSS 設定 div 的陰影顏色？
本文我們將學習如何使用 CSS 設定 <div> 元素的陰影顏色。就像我們觀察到的每個物體都有陰影一樣，我們也可以使用 CSS 為 <div> 元素建立任何顏色的陰影。您可能在瀏覽大多數網站時都看到過一些特殊效果。
讓我們在本文中進一步瞭解如何使用 CSS 建立 <div> 的陰影顏色。這可以透過使用 `box-shadow` 屬性來實現。
CSS `box-shadow` 屬性
在 CSS 中，`box-shadow` 屬性用於使元素的框架具有陰影般的外觀。元素的框架與它用逗號分隔，並受各種效果影響。`box-shadow` 可以使用相對於元素的 X 和 Y 偏移量、模糊和擴充套件半徑以及顏色來表徵。
語法
以下是 CSS `box-shadow` 屬性的語法。
box-shadow: h-offset v-offset blur spread color |none|inset|initial| inherit;
讓我們來看一個例子，以便更好地理解如何使用 CSS 設定 <div> 的陰影顏色。
示例
在下面的示例中，我們將指定水平和垂直陰影。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 350px;
height: 124px;
padding: 10px;
background-color: #D2B4DE;
box-shadow: 12px 13px;
}
</style>
</head>
<body>
<div>Mahendra Singh Dhoni, commonly known as MS Dhoni, is a former Indian cricketer and captain of the Indian national team in limited-overs formats from 2007 to 2017 and in Test cricket from 2008 to 2014, who plays as a Wicket-keeper-Batsman.</div>
</body>
</html>
執行上述程式後，將生成一個包含應用了水平和垂直陰影的 div 文字的輸出。
示例
考慮以下示例，我們將指定顏色以形成陰影。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 310px;
height: 110px;
padding: 12px;
background-color: #E5E7E9;
box-shadow: 11px 12px #BB8FCE;
}
</style>
</head>
<body>
<div>Virat Kohli is an Indian international cricketer and the former captain of the Indian national cricket team who plays as a right-handed batsman for Royal Challengers Bangalore in the IPL and for Delhi in Indian domestic cricket.</div>
</body>
</html>
執行上述程式碼後，輸出視窗將彈出，顯示網頁上帶有應用陰影的文字。
示例
以下是一個示例，我們將使用模糊引數來定義模糊半徑。數字越大，陰影越模糊。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 310px;
height: 90px;
padding: 13px;
background-color: #D1F2EB;
box-shadow: 9px 12px 6px #5B2C6F;
}
</style>
</head>
<body>
<div>The lion is a large cat of the genus Panthera native to Africa and India. It has a muscular, broad-chested body; short, rounded head; round ears; and a hairy tuft at the end of its tail. </div>
</body>
</html>
執行上述程式碼後，將生成一個包含文字以及網頁上應用的模糊陰影的輸出。
示例
讓我們考慮以下情況：我們將使用陰影的擴充套件半徑，如果值為正，則陰影大小會增加；如果值為負，則陰影大小會減小。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 310px;
height: 90px;
padding: 15px;
background-color: #D1F2EB;
box-shadow: 12px 9px 7px 10px #DFFF00;
}
</style>
</head>
<body>
<div>The dog is a domesticated descendant of the wolf. Also called the domestic dog, it is derived from the extinct Pleistocene wolf, and the modern wolf is the dog's nearest living relative.</div>
</body>
</html>
執行上述程式碼後，輸出視窗將彈出，顯示文字以及陰影大小的增加，因為我們已使用正值指定了擴充套件半徑。
更新於：2023年9月26日
163 次瀏覽
廣告