Question

有没有办法只影响单独的盒子阴影属性？

例如，我有这些类来设置按钮大小和按钮颜色

.btn {
    background: gray;
    font-size: 15px;
    box-shadow: 0 2px 0 0 dark-gray;
}

.btn--primary {
    background: blue;
    box-shadow: 0 2px 0 0 dark-blue;
}

.btn--secondary {
    background: red;
    box-shadow: 0 2px 0 0 dark-red;
}



.btn--large {
    font-size: 20px;
}

但是现在，我还想要.btn上更大的盒子阴影 - 大

问题是，我有多个彩色按钮，所以我需要某种“box-shadow-y-size属性”

你如何解决这个问题？我现在能想到的唯一方法就是做这样的事情......

.btn--large.btn--primary {
    box-shadow: 0 4px 0 0 dark-blue;
}

.btn--large.btn--secondary {
    box-shadow: 0 4px 0 0 dark-red;
}

Answer 1

遗憾的是，只有一种方法可以定义box-shadow，但在您的情况下，可能会有一种解决办法。如果您没有为box-shadow指定颜色，则默认为color属性的颜色。也许这是你可以利用的东西。

例如，如果您希望在保留原始文本颜色的同时能够使用不同颜色的盒子阴影，可以通过将box-shadow应用于：before伪元素而不是元素来实现此目的。本身。

JSFiddle with pseudo element solution

单独的盒阴影属性

1 个答案: