資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究使用CSS為文字新增多個陰影
無論是在平面設計、攝影還是網頁中，新增陰影都是一種強大的技術，可以營造深度和透視感。無需開啟Photoshop或其他影像編輯程式即可將此效果應用於網頁上的文字、影像和其他元素，可以使用CSS3屬性實現。您可以使用兩個屬性。大多數瀏覽器都支援這兩個功能，如下所示：
text-shadow
box-shadow
使用CSS，透過逗號分隔的陰影列表新增多個陰影。
使用CSS text-shadow屬性
CSS文字陰影是一個屬性，它將陰影新增到文字。該屬性將接受可以應用於文字的陰影列表。它也可以進行動畫處理，這是一個重要的功能，因為它可以使您的網站更具視覺吸引力。
語法
以下是CSS text-shadow屬性的語法：
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
示例
讓我們來看下面的例子，我們將使用text-shadow屬性並將陰影應用於文字。
<!DOCTYPE html>
<html>
<head>
<style>
.text {
font-family: verdana;
text-shadow: 1px 1px 2px #DE3163, 2px 3px 9px #7D3C98;
}
</style>
</head>
<body>
<p class="text">Mahendra Singh Dhoni is an Indian professional cricketer, who plays as a wicket-keeper-batsman. Widely regarded as one of the world's greatest wicket-keeper-batsmen and captains in the history of the sport, he is known for his explosive batting, wicket-keeping and leadership skills.</p>
</body>
</html>
執行以上程式碼後，生成的輸出將包含應用於它的陰影，顯示在網頁上。
使用CSS box-shadow屬性
可以使用box-shadow屬性為HTML元素應用多個陰影。透過在每對值之間新增逗號，可以修改每個陰影效果。offset-x和offset-y值決定了陰影相對於HTML元素的位置。一個陰影最多可以有六個不同的值。必須提供offset-x和offset-y的值。
語法
以下是CSS box-shadow屬性的語法：
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
示例
在下面的示例中，我們將使用CSS box-shadow屬性新增陰影。
<!DOCTYPE html>
<html>
<head>
<style>
body {
padding: 100px;
}
.tp {
width: 270px;
height: 200px;
font-family: verdana;
font-size: 30px;
color: #DE3163;
background-color: #FEF9E7;
box-shadow: 7px 7px 10px #BB8FCE, -6px -6px 12px #ABEBC6;
}
</style>
</head>
<body>
<div class="tp">WELCOME</div>
</body>
</html>
執行以上程式碼後，輸出視窗將彈出，顯示應用了陰影的文字，顯示在網頁上。
更新於：2024年1月8日
997 次瀏覽
廣告