我们如何覆盖一个特定值并保留box-shadow
列表中的所有其他值,如下所示:
div{
box-shadow: 0 0 0 5px #00ff00 , 0 0 0 10px #ff0000 , 0 0 0 15px #0000ff ;
}
假设我们只想覆盖第二个值而不会丢失其他值:
div.with-another-shadow{
box-shadow: ??? , 0 0 0 5px #abcdef , ??? ;
}
似乎只有当我们复制粘贴第一个和第三个值时才有可能。它不适用于auto
而不适用于inherit
。
是否可以仅使用css实现此目的,或者我们需要使用jQuery或JavaScript'getComputedStyle
方法或其他东西?
这是游乐场:http://jsfiddle.net/cherniv/uspTj/5/
P.S。似乎它也与多个background
图像列表相关..
答案 0 :(得分:3)
这不是一般案例的真正解决方案,而是解决小提琴特定情况的一招:
div{
box-shadow: 0 0 0 5px green, 0 0 0 10px #ff0000 , 0 0 0 15px blue;
position: relative;
}
div:nth-of-type(2):after {
content: '';
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: -5px;
box-shadow: 0 0 0 5px yellow;
}
我正在创建一个伪元素来保存第二个阴影,并设置一个边距(负数)以使其超过第一个阴影,这样我就不会在它上面绘制。
这是另一个演示,通过JavaScript改变价值
脚本如下
function change () {
var elem = document.getElementById("test");
var style = window.getComputedStyle(elem);
var boxShadow = style.boxShadow;
var arrayBoxShadows = parseFirstComma (boxShadow);
var newData = elem.dataset.boxshadow;
var arrayNewData = parseFirstComma (newData);
boxShadow = "";
var nmax = Math.min (arrayBoxShadows.length, arrayNewData.length)
for (var n = 0, lenR = nmax; n < lenR; n++) {
if (n > 0) {
boxShadow = boxShadow + ", ";
}
if (arrayNewData[n] == "inherit") {
boxShadow = boxShadow + arrayBoxShadows[n];
} else {
boxShadow = boxShadow + arrayNewData[n];
}
}
if (arrayNewData.length > nmax) {
for (var n = nmax, lenR = arrayNewData.length; n < lenR; n++) {
if (n > 0) {
boxShadow = boxShadow + ", ";
}
boxShadow = boxShadow + arrayNewData[n];
}
}
if (arrayBoxShadows.length > nmax) {
for (var n = nmax, lenR = arrayBoxShadows.length; n < lenR; n++) {
if (n > 0) {
boxShadow = boxShadow + ", ";
}
boxShadow = boxShadow + arrayBoxShadows[n];
}
}
elem.style.boxShadow = boxShadow;
}
function parseFirstComma (property) {
var properties = new Array();
var curr = "";
var chr;
var nested = "";
for (inx = 0, len = property.length; inx < len; inx++) {
chr = property[inx];
if (chr == "(") nested += 1;
if (chr == ")") nested -= 1;
if (nested == 0 && chr == ",") {
properties.push (curr);
curr = "";
} else {
curr = curr + chr;
}
}
if (curr.length > 0) {
properties.push (curr);
}
return properties;
};
document.onkeydown = function (e) {
e = e || window.event;
switch(e.which || e.keyCode) {
case 37:
change ();
break;
}
}
我正在检索应用于元素的box-shadow,并从数据值中检索所需的覆盖。然后,重新计算结果(使用inherit作为posible值)。按左箭头激活演示。
答案 1 :(得分:2)
在当前的CSS规范下,无法覆盖多值属性的其中一个值。
您需要在第二条规则中重复第一和第三个阴影的定义,即
div{
box-shadow: 0 0 0 5px #00ff00 , 0 0 0 10px #ff0000 , 0 0 0 15px #0000ff ;
}
div:nth-of-type(2){
box-shadow: 0 0 0 5px #00ff00 , 0 0 0 10px #abcdef , 0 0 0 15px #0000ff ;
}
W3邮件列表中的此消息表明它正在考虑http://lists.w3.org/Archives/Public/www-style/2013Apr/0711.html