今天分享一個在 C3 中，使用率極高的特效
陰影主要有兩類：
文字陰影（text - shadow）
塊狀元素陰影（box - shadow）
文字陰影，一般就是為標題服務的。
就用 h1，最大的，怕你忘了，給你個圖：
最簡單代碼：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<h1>魚C工作室-不二如是</h1>
</body>
</html>
效果圖：
添加陰影效果代碼：
<style type="text/css">
h1{
text-shadow: 0 8px 5px rgba(0,0,0,.5);
}
</style>
通過 C3 樣式表，添加效果：
text-shadow 四個參數分別為：
x 方向上的陰影（水平）位移、
y 方向上的陰影（垂直）位移、
陰影模糊程度、
陰影顏色
陰影水平方向無位移、垂直方向向下 8px 位移、模糊大小 5px、黑色且透明度 50%
除了添加陰影，還可以為文字添加內嵌浮雕效果。
設置 h2 標籤，就用咱 魚C 的標語：
添加浮雕效果：
h2{
color: #FFF;
text-shadow: 1px 1px 0 rgba(0,0,0,.7);
}
效果圖：
完成了文字元素的添加，現在看下塊狀元素怎麼玩
看下代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div>
<h1>塊狀元素</h1>
</div>
</body>
</html>
效果圖，啥也沒有：
添加 box-shadow 屬性：
<style type="text/css">
.box{
width: 199px;
height: 199px;
background: #FFF;
box-shadow: 11px 11px 11px rgba(0,0,0,.5);
}
</style>
效果圖：
box-shadow 和 text-shadow，前 4 個屬性值一樣：
第一個陰影橫向右移 11px、向下移動 11px、陰影模糊大小 11px、黑色陰影 50% 透明度
當然如果都一樣，就沒必要再搞一個 box-shadow 屬性了
box-shadow 還有兩個可選參數：
第四位，spread，陰影尺寸；
最後一位，inset（默認 outset），陰影由外轉內；
先來看，spread：
box-shadow: 11px 11px 11px 33px rgba(0,0,0,.5);
效果圖：
inset：
box-shadow: 11px 11px 11px 33px rgba(0,0,0,.5) inset;
效果圖：
實在有些難看，現在添加點精細質感設計：
除了添加 div 居中，修改字體，添加廣告。
最重要引入圓角變，低透明度的陰影，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
text-align: center;
}
.box{
margin: 0 auto;
width: 300px;
height: 300px;
background:#FFF;
border-radius:5px;
box-shadow: 0 1px 2px 11px rgba(0,0,0,.15);
}
</style>
</head>
<body>
<div>
<h1><font face="verdana">魚C工作室</font></h1>
<p><font size="6" face="arial" color="#F4A">讓編程改變世界</font></p>
<p align="right"><font size="3" face="NSimSun" color="#888"><b>在下不二如是,失敬失敬</b></font></p>
</div>
</body>
</html>
效果圖：
如果喜歡本系列 HTML 帖子
歡迎到魚C論壇訂閱 專輯☟