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