CSS box-shadow Property

Posted on Edited on In Views: Disqus:

 

box-shadow 是用來制造陰影的屬性，其語法為

box-shadow: none|h-offset v-offset blur spread color;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        h1 {
            width: 200px;
            box-shadow: 50px 5px 10px 10px red;
        }
    </style>
</head>
<body>
    <h1>aaabbbccc</h1>
</body>
</html>

說明：

預設值為 none。

h-offset 必要項，是控制水平陰影，正值在陰影右邊，負值在陰影左邊。

v-offset 必要項，是控制垂直陰影，正值在陰影下方，負值在陰影上方。

blur 非必要項，是控制陰影的糢糊度，必需為 0 或正值，數值越大越糢糊。

spread 非必要項，是控制陰影的擴散區域。

color 非必要項，用來指定陰影的顏色。