Question

我有一个带有框阴影的元素，该阴影具有同心层并带有基础色的阴影。目前，这些颜色已经过硬编码。

是否有聪明的技巧可以仅使用CSS获得6位十六进制基色的阴影？即不使用JavaScript或CSS预处理程序？

我正在寻找类似的东西： --layer-01: calc(var(--base-color) + 55) 在这种情况下设置不透明度。

:root {
  --base-color: #1d5769;
  --layer-01: #c5ecf8;
  --layer-02: #d4f0f9;
  --layer-03: #e9f8fc;
  --layer-04: #f2fbfd;
}

.button {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  background-color: var(--layer-01);
  box-shadow: 
    0 0 0 4px var(--layer-01), 
    0 0 0 6px var(--base-color), 
    0 0 0 46px var(--layer-02), 
    0 0 0 86px var(--layer-03), 
    0 0 0 126px var(--layer-04);
}

<div class="button"></div>

Answer 1

您可以考虑-e foo的颜色，例如，可以更灵活地控制hsl

lightness

:root {
  --base-color:194, 57%;
  --layer-00: hsl(var(--base-color), 20%);
  --layer-01: hsl(var(--base-color), 40%);
  --layer-02: hsl(var(--base-color), 50%);
  --layer-03: hsl(var(--base-color), 60%);
  --layer-04: hsl(var(--base-color), 70%);
}

.button {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  background-color: var(--layer-00);
  box-shadow: 
    0 0 0 4px var(--layer-01), 
    0 0 0 46px var(--layer-02), 
    0 0 0 86px var(--layer-03), 
    0 0 0 126px var(--layer-04);
}

对于不透明度，您可以考虑使用rgba语法，如下所示：

<div class="button"></div>

:root {
  --base-color:29, 87, 105;
  --layer-00: rgba(var(--base-color), 1);
  --layer-01: rgba(var(--base-color), 0.8);
  --layer-02: rgba(var(--base-color), 0.6);
  --layer-03: rgba(var(--base-color), 0.4);
  --layer-04: rgba(var(--base-color), 0.2);
}

.button {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  background-color: var(--layer-00);
  box-shadow: 
    0 0 0 4px var(--layer-01), 
    0 0 0 46px var(--layer-02), 
    0 0 0 86px var(--layer-03), 
    0 0 0 126px var(--layer-04);
}

Answer 2

您可以使用filter属性，尽管它适用于整个元素。将其应用于：pseudo可以破解5层中的2层： Codepen 。

:root {
  --base-color: #1d5769;
  --layer-01: #c5ecf8;
  --layer-02: #d4f0f9;
  /*--layer-03: #e9f8fc;
  --layer-04: #f2fbfd;*/
}

.box {
  position: relative;
  height: 5rem;
  margin: 10rem;
  background-color: var(--layer-01);
  box-shadow:
    0 0 0 4px var(--layer-01),
    0 0 0 6px var(--base-color),
    0 0 0 46px var(--layer-02);/*,
    0 0 0 86px var(--layer-03),
    0 0 0 126px var(--layer-04);*/
}

.box::before {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: -126px;
  left: -126px;
  display: block;
  width: calc(100% + 252px);
  height: calc(100% + 252px);
  border: 40px solid var(--base-color);
  filter: brightness(800%);
}

.box::after {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: -86px;
  left: -86px;
  display: block;
  width: calc(100% + 172px);
  height: calc(100% + 172px);
  border: 40px solid var(--base-color);
  filter: brightness(700%);
}

<div class="box"></div>

因此，在这里您需要一个额外的空元素，该元素将带来3个更多可样式化的区域…

也许自定义PNG（.SVG？）mask可以解决问题？或哼哼最后的想法用由5个重叠矩形组成的SVG代替box-shadow 。他们的fill颜色将是您选择的颜色，其中4个具有亮度滤镜。

Learn About CSS Custom Properties Through Clever Uses of Them（Chris Coyer）中的好主意及其与DRY切换的联系，或者如果您可以使用--picked: 240, 127, 172;，那么Theming with CSS variables in RGBA（Ben Szabo）应该可以解决问题。

仅使用CSS获得6位十六进制颜色的阴影？

2 个答案: