css實現陰影效果的方法：1、使用text-shadow屬性，可以設定帶陰影的文本，實現文字陰影效果；2、使用box-shadow屬性，可以將陰影應用於文本框，實現邊框陰影效果。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
方法1：使用text-shadow屬性實作文字陰影效果
text-shadow屬性用於設定帶陰影的文字；可設定陰影的像素長度、寬度和模糊的距離以及陰影的色彩。
範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css设置文本阴影效果</title>
<style>
h1 {
color: red;
text-shadow: 3px 5px 5px #656B79;
}
</style>
</head>
<body>
<h1>文本阴影！</h1>
</body>
</html>
方法2：使用box-shadow屬性實作邊框陰影效果
box- shadow屬性可以將陰影套用到文字框，可設定中陰影的像素長度，寬度和模糊的距離以及陰影的顏色。
範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css设置边框阴影效果</title>
<style>
div{
width:300px;
height:100px;
background-color:red;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div>边框阴影！</div>
</body>
</html>效果圖：
#（學習影片分享：css影片教學 ）
以上是css怎麼實現陰影效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
