CSS - box-shadow 屬性

上一頁
下一頁

CSS box-shadow 屬性可在元素周圍新增陰影效果。可以新增一個或多個陰影效果，用逗號分隔。盒陰影由相對於元素的水平和垂直偏移量、模糊半徑、擴充套件半徑和顏色來描述。

語法

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

屬性值

值 描述
none 此值不顯示任何陰影。預設值
h-offset 定義水平偏移量。正值將陰影放置在框的右側，負值將陰影放置在框的左側。必需。
v-offset 定義垂直偏移量。正值將陰影放置在框的下方，負值將陰影放置在框的上方。必需
blur 定義模糊半徑。值越高，模糊度越高。可選。
spread 定義擴充套件半徑。正值會增加陰影的大小，負值會減小陰影的大小。可選
color 定義陰影的顏色。可以使用不同的顏色格式。預設為文字顏色。可選
inset 將外部陰影更改為內部陰影。
initial 將屬性設定為其預設值。
inherit 從父元素繼承屬性。

CSS 盒陰影屬性示例

以下示例說明了使用不同值的 box-shadow 屬性。

帶有盒陰影的盒陰影屬性

要為框設定陰影，我們至少需要指定兩個值，一個用於 水平 偏移量，另一個用於 垂直 偏移量。根據值的符號，陰影的位置會相應更改。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: grid;
            justify-content: center;
            align-items: center;
            gap: 30px;
        }
        .boxes {
            padding: 50px;
            text-align: center;
            font-weight: bold;
        }
        .first {
            background-color: lightcoral;
            box-shadow: 10px 10px;
        }
        .second {
            background-color: lightblue;
            box-shadow: 10px -10px;
        }
        .third {
            background-color: lightgreen;
            box-shadow: -10px 10px;
        }
        .fourth {
            background-color: lightgrey;
            box-shadow: -10px -10px;
        }
    </style>
</head>

<body>
    <h2>
        CSS box-shadow property
    </h2>
    <p>
        Positive horizontal offset places the shadow
        to the right of box and negative horizotal offset
        places the shadow to the left of box. 
    </p>
    <p>
        Positive vertical offset places the 
        shadow below the box and negative values places
        it above the box.
    </p>
    <div class="container">

        <p class="first boxes">
            box-shadow: 10px 10px
        </p>
        <p class="second boxes">
            box-shadow: 10px -10px
        </p>
        <p class="third boxes">
            box-shadow: -10px 10px
        </p>
        <p class="fourth boxes">
            box-shadow: -10px -10px
        </p>
    </div>

</body>

</html>

帶有模糊的盒陰影屬性

要為框的陰影設定模糊，我們需要指定三個值。前兩個值是水平和垂直偏移量，第三個值用於模糊，第三個值越高，模糊度越大。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: grid;
            justify-content: center;
            align-items: center;
            gap: 30px;
        }

        .boxes {
            padding: 50px;
            text-align: center;
            font-weight: bold;
        }

        .first {
            background-color: lightcoral;
            box-shadow: 10px 10px 10px;
        }

        .second {
            background-color: lightcoral;
            box-shadow: 10px 10px 20px;
        }

        .third {
            background-color: lightcoral;
            box-shadow: 10px 10px 40px;
        }    
    </style>
</head>

<body>
    <h2>
        CSS box-shadow property
    </h2>
    <p>
        The third value decides the blur, 
        greater the value more is the blur.
    </p>
    <div class="container">

        <p class="first boxes">
            box-shadow: 10px 10px 10px
        </p>
        <p class="second boxes">
            box-shadow: 10px -10px 20px
        </p>
        <p class="third boxes">
            box-shadow: -10px 10px 40px
        </p>

    </div>

</body>

</html>

帶有擴充套件值的盒陰影屬性

要設定框陰影的大小，我們需要指定四個值。前兩個值是水平和垂直偏移量，第三個值用於模糊，第四個值決定陰影的大小，正值導致更大的陰影，而負值導致更小的陰影。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: grid;
            justify-content: center;
            align-items: center;
            gap: 30px;
        }

        .boxes {
            padding: 50px;
            text-align: center;
            font-weight: bold;
        }

        .first {
            background-color: lightblue;
            box-shadow: 10px 10px 10px 5px;
        }

        .second {
            background-color: lightblue;
            box-shadow: 10px 10px 20px 15px;
        }

        .third {
            background-color: lightblue;
            box-shadow: 10px 10px 40px -5px;
        }    
    </style>
</head>

<body>
    <h2>
        CSS box-shadow property
    </h2>
    <p>
        The fourth value decides the size of the shadow, 
        positive value results in larger shadow while negative
        value results in smaller shadow.
     </p>
    <div class="container">

        <p class="first boxes">
            box-shadow: 10px 10px 10px 5px
        </p>
        <p class="second boxes">
            box-shadow: 10px -10px 20px 14px
        </p>
        <p class="third boxes">
            box-shadow: -10px 10px 40px -5px
        </p>

    </div>

</body>

</html>

帶有顏色的盒陰影屬性

要為框的陰影設定顏色，我們需要至少指定三個值。前兩個值是水平和垂直偏移量，第三個值用於顏色，顏色也可以與模糊和擴充套件一起指定。顏色可以用不同的格式指定（例如，顏色名稱、十六進位制值、rgb 值等）。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: grid;
            justify-content: center;
            align-items: center;
            gap: 30px;
        }

        .boxes {
            padding: 50px;
            text-align: center;
            font-weight: bold;
        }

        .first {
            background-color: lightcoral;
            box-shadow: 10px -10px grey;
        }

        .second {
            background-color: lightcoral;
            box-shadow: 10px 10px 20px rgb(51, 204, 0);
        }

        .third {
            background-color: lightcoral;
            box-shadow: 10px 10px 40px -5px hsl(225, 100%, 50%);
        }    
    </style>
</head>

<body>
    <h2>
        CSS box-shadow property
    </h2>
    <p>
        The color can be specified as third parameter,
        fourth parameter of even fifth parameter. 
        The specified color will be applied to the shadow.
     </p>
    <div class="container">
        <p class="first boxes">
            box-shadow: 10px -10px grey
        </p>
        <p class="second boxes">
            box-shadow: 10px 10px 20px rgb(51, 204, 0)
        </p>
        <p class="third boxes">
            box-shadow: 10px 10px 40px -5px hsl(225, 100%, 50%)
        </p>

    </div>

</body>

</html>

帶有內嵌值的盒陰影屬性

要讓盒陰影出現在元素內部而不是外部，我們使用 inset 值。這在以下示例中顯示

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: grid;
            justify-content: center;
            align-items: center;
            gap: 30px;
        }

        .boxes {
            padding: 50px;
            text-align: center;
            font-weight: bold;
        }

        .first {
            background-color: lightgreen;
            box-shadow: 10px -10px red inset;
        }

        .second {
            background-color: lightgreen;
            box-shadow: 10px 10px 20px rgb(51, 204, 0) inset;
        }
    </style>
</head>

<body>
    <h2>
    CSS box-shadow property
    </h2>
    <p>
        The inset value places the
        shadow within the elment.
    </p>
    <div class="container">
        <p class="first boxes">
            box-shadow: 10px -10px red inset
        </p>
        <p class="second boxes">
            box-shadow: 10px 10px 20px rgb(51, 204, 0) inset
        </p>

    </div>

</body>

</html>

帶有多個陰影的盒陰影屬性

要為框設定多個陰影，每個樣式都必須用逗號分隔。陰影將按照在 box-shadow 屬性中指定的順序顯示。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: grid;
            justify-content: center;
            align-items: center;
            gap: 30px;
        }

        .boxes {
            padding: 50px;
            text-align: center;
            font-weight: bold;
        }

        .first {
            background-color: lightcoral;
            box-shadow: 10px -10px grey, 
            15px -15px black, 
            20px -20px brown;
        }

        .second {
            background-color: lightgreen;
            box-shadow: 5px 5px red, 
            10px 10px blue, 
            15px 15px green;
        }
    </style>
</head>

<body>
    <h2>
    CSS box-shadow property
    </h2>
    <p>
        Number of shadows can be altered by 
        specifying the different styles and
        separating them by commas. 
    </p>
    <div class="container">
        <p class="first boxes">
            box-shadow: multiple shadows
        </p>
        <p class="second boxes">
            box-shadow: multiple shadows
        </p>
    </div>

</body>

</html>

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
box-shadow 10.0 9.0 4.0 5.1 10.5
css_properties_reference.htm
列印頁面
上一頁
下一頁
廣告