DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS3基礎 >> 7.5 邊框陰影box-shadow屬性
7.5 邊框陰影box-shadow屬性
編輯:CSS3基礎     

一、box-shadow屬性簡介

邊框陰影,是一種很常見的特效。在 學習網的在線工具欄目中,我們都能看到:

以前在CSS2.1時,如果想要為元素添加邊框陰影(就像上圖那樣),也是只能通過背景圖片的方法來實現。

在CSS3中,我們可以使用box-shadow屬性輕松地為元素添加陰影效果。

語法:

box-shadow:x-shadow  y-shadow  blur  spread  color  inset;

說明:

(1)x-shadow:設置水平陰影的位置(X軸),可以使用負值;

(2)y-shadow:設置垂直陰影的位置(y軸),可以使用負值;

(3)blur:設置陰影模糊半徑;

(4)spread:擴展半徑,設置陰影的尺寸;

(5)color:設置陰影的顏色;

(6)inset:這個參數默認不設置。默認情況下為外陰影,inset表示內陰影。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 box-shadow屬性</title>
    <style type="text/css">
    #div1
    {
        width:200px;
        height:100px;
        border:1px solid silver;
        box-shadow:5px 5px 8px red;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

在浏覽器預覽效果如下:

二、box-shadow屬性詳解

我們都知道box-shadow屬性語法如下:

box-shadow:x-shadow  y-shadow  blur  spread  color  inset;

接下來,我們詳細對這幾個屬性值進行講解。

1、水平陰影位置x-shadow和垂直陰影位置y-shadow

水平陰影位置x-shadow和垂直陰影位置y-shadow的屬性取值,單位可以是px、em或百分比等,允許負值。

舉例:

在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 box-shadow屬性</title>
    <style type="text/css">
    #div1
    {
        width:200px;
        height:100px;
        border:1px solid silver;
        box-shadow:-5px -5px 8px red;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

在浏覽器預覽效果如下:

分析:

大家跟舉例1對比一下,看看x-shadow和y-shadow設置為正值與負值方向有什麼不同。

2、模糊半徑blur

模糊半徑blur用於設置邊框陰影半徑大小。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 box-shadow屬性</title>
    <style type="text/css">
        #div1
        {
            width:200px;
            height:100px;
            border:1px solid silver;
            box-shadow:5px 5px 0px red;
        }
        </style>
    <script src="../App_js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script type='text/javascript'>
        $(function () {
            $("#range").change(function () {
                var num = $(this).val();
                $("#value").text(num);
                $("#div1").css("box-shadow", "5px 5px " + num + "px red");
            });
        })
    </script>
</head>
<body>
    <input id="range" type="range" min="0" max="25" value="0"/>
    <span id="value">0</span>
    <div id="div1"></div>
</body>
</html>

在浏覽器預覽效果如下:

分析:

這裡我做了一個小小的程序,當大家拖動滑動條的時候,可以動態地觀察陰影半徑變化形態。至於程序如何實現的,請關注我們未來上線的jQuery入門教程,在此不再說明,大家只需要觀察陰影半徑變化即可。

3、陰影尺寸spread

陰影尺寸spread用於設置陰影的大小。這個參數可選,缺省時值為0。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 box-shadow屬性</title>
    <style type="text/css">
        #div1
        {
            width:200px;
            height:100px;
            border:1px solid silver;
            box-shadow:5px 5px 0px red;
        }
        </style>
    <script src="../App_js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script type='text/javascript'>
        $(function () {
            $("#range").change(function () {
                var num = $(this).val();
                $("#value").text(num);
                $("#div1").css("box-shadow", "5px 5px " + num + "px red");
            });
        })
    </script>
</head>
<body>
    <input id="range" type="range" min="0" max="25" value="0"/>
    <span id="value">0</span>
    <div id="div1"></div>
</body>
</html>

在浏覽器預覽效果如下:

分析:

對於參數spread,用於改變陰影的大小。如果值為正,則整個陰影都延展擴大;如果值為負,則整個陰影縮小。

4、外陰影outset與內陰影inset

box-shadow屬性最後一個參數用於設置陰影是否是內陰影,還是外陰影。

取值有2種:

(1)outset:默認值,外陰影;

(2)inset:內陰影;

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 box-shadow屬性</title>
    <style type="text/css">
        div
        {
            width:100px;
            height:100px;
            line-height:100px;
            text-align:center;
        }
        #div1{box-shadow:0 0 12px red;}
        #div2{box-shadow:0 0 12px red inset;}
    </style>
</head>
<body>
    <div id="div1">外陰影</div>
    <div id="div2">內陰影</div>
</body>
</html>

在浏覽器預覽效果如下:

分析:

默認情況下,邊框陰影是外陰影效果,設置最後一個屬性值為inset時,邊框陰影為內陰影效果。

這裡注意一個技巧:當水平陰影位置x-shadow和垂直陰影位置y-shadow都為0時,陰影都向外發散或者都向內發散。很多人想要這種效果,之前也不知道怎麼做!

三、四條邊框獨立樣式

box-shadow屬性可以為邊框的4條邊的設置獨立樣式。其中,每條邊的陰影屬性值之間用英文逗號隔開即可。

語法:

box-shadow: 左邊陰影,頂部陰影,底部陰影,右邊陰影;

說明:

注意偏移半徑的正負。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 box-shadow屬性</title>
    <style type="text/css">
        #div1
        {
            width:100px;
            height:100px;
            line-height:100px;
            text-align:center;
            box-shadow:-5px 0 12px red,0 -5px 12px yellow,0 5px 12px blue,5px 0 12px green;
        }
    </style>
</head>
<body>
    <div id="div1">外陰影</div>
</body>
</html>

在浏覽器預覽效果如下:

分析:

仔細觀察水平陰影位置x-shadow和垂直陰影位置y-shadow這兩個取值是如何設置的。

這一節的內容有點多,但卻是非常值得你花時間去消化。更何況這些內容,俺已經幫你系統化了。想起我當初學的時候,還得翻閱大量資料。雖然這些東西唾手可得,還望珍惜!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved