我想在我的页面上创建一个井区,使得该区域看起来像是在页面下面几个像素.我的页面目前有白色背景和#F5F5F5井区.
我看了一下twitter的bootstrap：
- http://getbootstrap.com/components/#wells
对我来说,至少这看起来并不好.也许是因为我知道后一版本的重点是创造一个平面效果.
解决方法
使用盒子阴影和明智的颜色选择的组合,您可以很容易地使事物看起来像井：
演示：
- div {
- height: 100px;
- width: 200px;
- background: rgba(0,0.2);
- border-radius: 10px;
- Box-shadow: inset 0 0 10px black,0 0 10px black;
- padding: 10px;
- display: inline-block;
- margin: 15px;
- vertical-align: top;
- text-align: center;
- }
- html,body {
- background: gray;
- }
- .second {
- Box-shadow: inset 1px 1px 10px black,0 0 30px black;
- }
- .third {
- Box-shadow: inset 0px 0px 10px black,0 0 20px black;
- }
- .forth {
- Box-shadow: inset 0 0 20px rgba(0,0.5),0 0 30px black;
- }
- <div>this is deep</div>
- <div class="second">I'm slightly different. But still look deep</div>
- <div class="third">Don't fall down me!</div>
- <div class="forth">Do you,like,wells?</div>
