css3如何實現添加陰影

css3如何實現添加陰影，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

南山網站建設公司創新互聯,南山網站設計制作，有大型網站制作公司豐富經驗。已為南山千余家提供企業網站建設服務。企業網站搭建\成都外貿網站建設要多少錢，請找那個售后服務好的南山做網站的公司定做！

方法：1、利用“text-shadow:水平陰影垂直陰影模糊距離顏色;”語句給文本元素添加陰影；2、利用“box-shadow:水平陰影垂直陰影模糊距離模糊尺寸顏色內部陰影;”語句向框元素添加陰影。

本教程操作環境：windows10系統、CSS3&&HTML5版、Dell G3電腦。

css3怎樣實現添加陰影

text-shadow 屬性向文本設置陰影。

box-shadow 屬性向框添加一個或多個陰影。

語法為：

text-shadow: h-shadow v-shadow blur color;

css3如何實現添加陰影

box-shadow: h-shadow v-shadow blur spread color inset;

css3如何實現添加陰影

示例如下：

<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style> 
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
h2
{
text-shadow: 5px 5px 5px #FF0000;
}
</style>
</head>
<body>
<div>框陰影效果！</div>
<h2>文本陰影效果！</h2>
</body>
</html>

輸出結果：

css3如何實現添加陰影