由于浏览器性能影响,我不能使用box-shadow
CSS 属性,因为我的页面上有许多外观相似的元素,这些元素应该具有相同的外观样式,包括阴影。这就是我想使用传统 PNG 图像实现阴影的原因。
事实
- 我的元素已预定义且更重要的是固定像素宽度
- 它们具有流体高度 (
auto
),具体取决于它们的内容 - 它们直接在元素中包含内容,并且一些子元素将位于其边界之外
- 可以使用 CSS3,但应避免对性能至关重要的部分(渐变、阴影...)
- CSS 伪元素可以不受限制地使用
要求
- 不应该添加额外的包装元素来获得流畅的阴影
- 应用程序应在移动浏览器上流畅运行 - 阴影似乎会显着降低移动设备上的性能,因为它们的处理能力远低于台式计算机。
可能的方向
我想过使用:before
and :after
pseudos 在包含元素上显示从上到下和底部的阴影,但是这些伪元素显示在它们的父元素内,并且将父元素定位在z-index
高于这些子元素的位置没有效果。
最终结果的视觉演示
我想实现的纯 CSS3 中的这个JSFiddle 演示,但使用 PNG 阴影。实际上有很多这样的盒子,所以你可以想象移动浏览器正在与所有这些阴影作斗争。
项目就是这样一个需要 PNG 阴影的盒子(见打击)。左侧菜单是位于框外的子元素。
在 Chrome 中显示
HTML
<div class="item">
<menu>
<li><a href="#">Yes</a></li>
<li><a href="#">No</a></li>
<li><a href="#">Maybe</a></li>
</menu>
<div class="content">
Some content
</div>
</div>
CSS3 少
.item {
position: relative;
width: 300px;
background-color: #fff;
box-shadow: 0 0 10px #ccc;
margin: 20px 20px 20px calc(20px + 3.5em);
min-height: 5em;
&:first-child {
margin-top: 0;
}
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 5em;
background-color: #fff;
}
menu {
position: absolute;
top: 0;
left: -3.5em;
width: 3.5em;
margin: 0;
border: 0;
padding: 0;
list-style: none;
background-color: #fff;
box-shadow: 0 0 10px #ccc;
li a {
display: block;
text-align: center;
padding: 2px 0;
}
}
.content {
padding: .75em 1em;
}
}