将额外的盒子阴影添加到现有阴影未知的元素
我假设这个问题的答案是不可能的,但是我总是希望有人知道一个聪明的解决方法。将额外的盒子阴影添加到现有阴影未知的元素
比方说,我有以下.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);
}
继承是不是在这里正确的字,因为继承意味着从父价值,但你的想法。
这种方法虽然不是全面的,但至少可以让我知道我没有与现有的盒子阴影冲突,除非他们定义了三个以上。在大多数情况下,这将足够好。
有没有人知道是否有这样的事情是可能的,或者是否有建议的语法为已定义的添加阴影?
绝对定位的伪元素(与原来的具有容器位置集)似乎是唯一的解决办法:
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);
}
我想这是你想要的http://www.css3.info/preview/box-shadow/
SCROLL加入到我们多重阴影。
我想你已经误解了这个问题。 – 2012-07-14 18:10:54
一种解决方案是使用伪元素:
.left-inset::after {
content: '';
width: 100%;
height: 100%;
display: block;
box-shadow: 1px 0 0 rgba(255,255,255,.25);
}
这是一个有点哈克,但只要该元素尚未定义::伪元素已经经过,它应该工作。
的一种方法是,以确定当前的box-shadow,叠加所需要的零件,并应用于回(不知道这将是值得的麻烦,但..)。
window.getComputedStyle(element).boxShadow
会给你一个字符串格式,如:
<color> <left> <top> <softness> <spread>
- 例如:rgb(102, 102, 102) 5px 5px 5px 0px
一旦你有一个变量上面的字符串:
- 使用拆呢空格字符 -
s = s.split(' ');
- 采取的最后四个部分
- 更换或根据需要在阵列中
- 使用空间加入阵列保持个人的价值观 -
s = s.join(' ');
- 申请回元素 -
elem.style.boxShadow = s;
注意:这在ff和chrome中工作(因为返回的字符串格式是相同的)。但我认为这实在太过于矫枉过正,无法在生产版本中尝试。此外,它会花费更多的工作来叠加您在css中编写的类中的样式。
不幸的是不适用'''