CSS - 高级项目背景

Question

我想创建一个项目（链接），两侧（左侧和右侧）都有内部阴影，项目的其余部分将是透明的。

看起来应该是这样的：

关键是我不知道我的链接有多宽，所以我需要这样的东西：

background: url(left-shadow) left center;
background: url(right-shadow) right center;

但是对于一个元素。任何想法如何实现？

你们对多种背景完全正确，但即使在IE8中它们也不受支持：

http://www.quirksmode.org/css/multiple_backgrounds.html

那么也许别的什么？我忘了提到我希望我的解决方案至少在IE8中工作（并且非常适合在IE7中使用它）。

Answer 1

CSS3支持多种背景，语法如下：

background: url(left-shadow) left center,
            url(right-shadow) right center,
            url(bottom-shadow) center bottom;

Answer 2

嗯这真的很有意思！我建议你添加三个背景。

background:url(bottom-shadow) left bottom, url(left-shadow) left center, url(right-shadow) right center;

底部阴影也应包括灰白色渐变。注意每个背景之间的逗号。

Answer 3

你将要使用css“Sliding Doors”它会增加一些标记开销，但在这种情况下可以很好地工作，直到CSS3多个背景内容得到更广泛的支持。

您可以在此处阅读：A List Apart "Sliding Doors" technique

Answer 4

CSS内部阴影示例

.innerShadow_css
{
   -moz-box-shadow:inset 0 0 11px #000000;
   -webkit-box-shadow:inset 0 0 11px #000000;
   box-shadow:inset 0 0 11px #000000;
}

http://discoverweb.info/css-inner-shadow.html