css 左边阴影_css 实现单边内阴影

昨天做一个新网站的，其中有一个效果是单边(上边)内阴影，原以为正常的内阴影效果就可以任意指定哪一边，后来发现不是，这是一个没有解决的问题。

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

网页的效果是这样子，注意中间大大的蓝色 banner 那里，单单是上方做了一个 40px 的内阴影。

具体思路如下：

1. 蓝色框固定高度，宽度充满，使用 overflow: hidden；

2. 里面放一个 absolute 定位的充满的 div，加上 40px 内阴影;

3. 里面这个阴影框左、右、下边各使用 -40px 的绝对定位;

然后就大功告成了，非常简单。

下面简单写一下代码：

1. Markup:

CSS

.banner {

border-top: 2px solid #AAA;

background-color: #4DC2F5;

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