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

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

你可以考虑qazxsw poi颜色，你将有更好的灵活性来控制qazxsw poi例如

hsl

lightness

对于不透明度，您可以考虑如下的rgba语法：

: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);
}

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

Answer 2

您可以使用

: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);
}

属性，但它适用于整个元素。将它应用于：伪允许破解5层中的2层：<div class="button"></div>。

filter

Codepen

所以在这里你需要一个额外的空元素，这将带来3个更可口的区域......

也许定制的PNG（.SVG？）

: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%);
}

可以做到这一点？或者嗡嗡声的最终想法用由5个叠加的矩形组成的SVG替换你的<div class="box"></div>。他们的mask颜色将是你挑选的颜色，其中4个有亮度滤镜。

可能是qazxsw poi（Chris Coyier）的好主意以及它与DRY切换的联系，或者如果你可以拥有qazxsw poi那么qazxsw poi（Ben Szabo）应该可以做到这一点。