2012-07-14 112 views
5

我假设这个问题的答案是不可能的,但是我总是希望有人知道一个聪明的解决方法。将额外的盒子阴影添加到现有阴影未知的元素

比方说,我有以下.left-inset,增加了1px的白色盒子阴影元素的左侧给它一些深度类:

.left-inset { 
    box-shadow: inset 1px 0 0 rgba(255,255,255,.25); 
} 

的问题是,如果元素我加入这个类已经定义了一个盒子阴影,这个盒子阴影将覆盖现有的阴影(或者这个阴影将不会被应用,这取决于级联)。我想找到一种安全地添加这个类而不会发生冲突的方法。

我希望有这样的事情下面的一些未来的浏览器支持:

.left-inset { 
    box-shadow: inherit, inherit, inherit, inset 1px 0 0 rgba(255,255,255,.25); 
} 

继承是不是在这里正确的字,因为继承意味着从父价值,但你的想法。

这种方法虽然不是全面的,但至少可以让我知道我没有与现有的盒子阴影冲突,除非他们定义了三个以上。在大多数情况下,这将足够好。

有没有人知道是否有这样的事情是可能的,或者是否有建议的语法为已定义的添加阴影?

回答

3

绝对定位的伪元素(与原来的具有容器位置集)似乎是唯一的解决办法:

See the fiddle.(用于视觉我没有不同大小/颜色)。

.test:before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    box-shadow:3px 3px rgba(275,0,0,.25); 
} 
+0

不幸的是不适用'''