gpt4 book ai didi

css - 如何更新 box-shadow 属性的单个值?

转载 作者:行者123 更新时间:2023-12-04 17:45:36 24 4
gpt4 key购买 nike

我想覆盖 box-shadow 上的距离,而不必再次设置颜色。

这里的用例是我有一个 .button 类:

.button {
color: white;
background: blue;
padding: 8px 15px;
font-size: 1.2em;
border: 3px solid black;
box-shadow: 0 3px 0 black;
}

然后我有一个 .button-small 类,它实际上是 .button 的子类,它对事物进行了一些小的调整。

.button.button-small {
padding: 4px 10px;
font-size: 1em;
border-width: 2px;
box-shadow: 0 2px 0 black;
}

如您所见,我可以轻松更改 border-width,而无需重新定义整个 border 属性。

有没有办法用 box-shadow 做到这一点?某种 box-shadow-distance 属性?

最佳答案

使用 CSS 变量:

.button {
color: white;
background: blue;
padding: 8px 15px;
font-size: 1.2em;
border: 3px solid black;
box-shadow: 0 var(--d, 5px) 0 black; /* 5px is the fallback/default value until you set the variable */
}

.button.button-small {
--d: 2px;
}
<span class="button">button</span>

<span class="button button-small">button</span>

<span class="button" style="--d:8px;">button</span>

关于css - 如何更新 box-shadow 属性的单个值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60570531/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com