資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何建立 CSS3 盒陰影和文字陰影效果？
要建立 CSS3 盒陰影和文字陰影效果，分別使用 `box-shadow` 和 `text-shadow` 屬性。讓我們透過示例逐一瞭解它們。
文字陰影
要向文字新增陰影，請使用 `text-shadow` 屬性。讓我們看看語法：
text-shadow: value
上述值可以是：
h-shadow - 設定水平陰影的位置。
v-shadow - 設定垂直陰影的位置。
blur-radius - 設定模糊半徑。
color - 設定陰影的顏色。
建立文字陰影
讓我們看一個建立文字陰影的示例：
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-shadow: 2px 2px blue;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<h2>Check the shadow of this text.</h2>
</body>
</html>
建立具有模糊效果的文字陰影
讓我們看一個建立具有模糊效果的文字陰影的示例。第三個引數設定為模糊半徑：
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-shadow: 2px 2px 5px blue;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<h2>Check the shadow of this text with the blur effect.</h2>
</body>
</html>
盒陰影
要將陰影設定到網頁上的元素，請使用 `box-shadow` 屬性。讓我們看看語法：
box-shadow: value
上述值可以是：
h-offset - 設定陰影的水平偏移。
v-offset - 設定陰影的垂直偏移。
blur - 設定模糊半徑。
spread - 設定擴充套件半徑
color - 設定陰影的顏色。
新增盒陰影
讓我們看一個新增盒陰影的示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
color: white;
text-align: center;
width: 150px;
height: 150px;
background-color: red;
box-shadow: 8px 8px blue;
}
</style>
</head>
<body>
<h1>Shadow effect example</h1>
<div>
BOX SHADOW
</div>
</body>
</html>
新增具有模糊半徑的盒陰影
讓我們看一個新增具有模糊半徑的盒陰影的示例。第三個引數設定為模糊半徑：
<!DOCTYPE html>
<html>
<head>
<style>
div {
color: white;
text-align: center;
width: 150px;
height: 150px;
background-color: red;
box-shadow: 8px 2px 8px rgb(89, 0, 255);
}
</style>
</head>
<body>
<h1>Shadow effect example</h1>
<div>
BOX SHADOW
</div>
</body>
</html>
新增具有模糊和擴充套件半徑的盒陰影
讓我們看一個新增具有模糊半徑的盒陰影的示例。第三個引數設定為模糊半徑，第四個引數設定為擴充套件半徑：
<!DOCTYPE html>
<html>
<head>
<style>
div {
color: white;
text-align: center;
width: 150px;
height: 150px;
background-color: blue;
box-shadow: 8px 2px 8px 7px yellow;
}
</style>
</head>
<body>
<h1>Shadow effect example</h1>
<div>
BOX SHADOW
</div>
</body>
</html>
更新於：2023年12月14日
170 次瀏覽
廣告