<div id="b2">陰影的測試</div> <style> #b2 { width: 400px; margin: 30px auto; padding: 30px; background-color: lightsteelblue; text-align: center; color: #fff; font-size: 40px; font-family: 'cwTeXHei', sans-serif; } </style>
#b2 { box-shadow: 15px 10px 10px 5px rgba(0, 0, 0, 0.6); } /* box-shadow: 水平位移 垂直位移 模糊羽化邊緣 實心擴展距離 陰影顏色; */
#b2 { box-shadow: -5px -5px 5px 0 rgba(0, 0, 0, 0.6); } /* 水平負值表示往左 垂直負值表示往上 */
#b2 { box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.6); } /* inset 是設計區塊往內凹陷的陰影效果, 實心擴展距離為0時可省略 */
#b2 { box-shadow: inset 5px 5px 5px 0 rgba(0, 0, 0, 0.6), 0 0 20px #f00; } /* 可以設計二層以上的陰影, 以逗號隔開, 寫在右方的陰影呈現在後方 */
#b2 { text-shadow: -1px -1px 4px #00f, 1px -1px 4px #00f, 1px 1px 4px #00f, -1px 1px 4px #00f, 6px 5px 10px #000; } /* 文字的陰影設計沒有inset */
#b2 { box-shadow: inset 5px 5px 5px 0 rgba(0, 0, 0, 0.6), 0 0 20px #f00; text-shadow: -1px -1px 4px #00f, 1px -1px 4px #00f, 1px 1px 4px #00f, -1px 1px 4px #00f, 6px 5px 10px #000; } /* 同時設計區塊及文字的陰影 */