昨天做一个新网站的，其中有一个效果是单边(上边)内阴影，原以为正常的内阴影效果就可以任意指定哪一边，后来发现不是，这是一个没有解决的问题。
因此最后想到了一个 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;
}
其实方法绝对还有很多，但是其实网页布局方面还是可以相当灵活的。
【转载请附】愿以此功德，回向 >>
