1. 程式人生 > >CSS3中box-shadow屬性的使用方法

CSS3中box-shadow屬性的使用方法

1.

box-shadow屬性讓盒子在顯示時產生陰影效果。目前為止,該屬性受到了FF、Chrome、Safari、Opera瀏覽器的支援。

box-shadow屬性的指定方式如下所示:

box-shadow:length length length color

前三個length分別指陰影離開文字的橫方向距離、陰影離開文字的縱方向距離和陰影的模糊半徑,color指陰影的顏色。

2.建立盒內陰影

程式碼如下:

<style type="text/css">

div{

    background:#FFAA00;

    box-shadow:inset 0 0 5px 5px #888;

    width:200px;

    height:100px;

}

</style>

指定盒元素的內部陰影的水平方向與垂直方向上的偏移量距離均為0,模糊半徑與展開半徑均為5px。

3.對盒內子元素使用陰影

即可以指定在子元素的陰影。