css邊框陰影四邊，css 左邊陰影_css 實現單邊內陰影

昨天做一個新網站的，其中有一個效果是單邊(上邊)內陰影，原以為正常的內陰影效果就可以任意指定哪一邊，后來發現不是，這是一個沒有解決的問題。

因此最后想到了一個 Trick，自己在這里先 Mark 一下。

css邊框陰影四邊，網頁的效果是這樣子，注意中間大大的藍色 banner 那里，單單是上方做了一個 40px 的內陰影。

具體思路如下：

1. 藍色框固定高度，寬度充滿，使用 overflow: hidden；

css文字陰影效果代碼，2. 里面放一個 absolute 定位的充滿的 div，加上 40px 內陰影;

3. 里面這個陰影框左、右、下邊各使用 -40px 的絕對定位;

然后就大功告成了，非常簡單。

css怎么設置div陰影、下面簡單寫一下代碼：

1. Markup:

CSS

css給圖片添加陰影、.banner {

border-top: 2px solid #AAA;

background-color: #4DC2F5;

css實現下拉框。position: relative;

overflow: hidden;

height: 300px;

}

.banner .shadow {

position: absolute;

top: 0;

bottom: -40px;

left: -40px;

right: -40px;

-moz-box-shadow: inset 0 0 40px #555;

-webkit-box-shadow: inset 0 0 40px #555;

box-shadow: inset 0 0 40px #555;

}

其實方法絕對還有很多，但是其實網頁布局方面還是可以相當靈活的。

【轉載請附】愿以此功德，回向 >&gt