css - 对象内部的 HTML/CSS 边框阴影

Question

我正在寻找一种方法，使列表具有带实心阴影的边框，看起来就像第二个边框，而不使用图像作为边框，因为它会用于更改文本，这意味着宽度也会更改。

我的目标是:

但是没有添加第二个具有负 z-index 的对象，也没有使用宽度更改等脚本使所有内容复杂化。我得到的唯一结果是

使用的 CSS 代码会非常简单

li {
  padding: 5px;
  display: inline-block;
  border: 1px solid #718496;
  -webkit-box-shadow: 1px 1px rgba(68, 150, 210, 0.5);
          box-shadow: 1px 1px rgba(68, 150, 210, 0.5);
  border-radius: 10px;
  height: 18px;
}

*仅带图标的框只是为了展示我所追求的效果，而不是我唯一需要它的框。

有没有可能在没有第二个带有边框的对象的情况下实现这种效果？

Answer 1

border-shadow最多可以接受 6 个参数(请参阅 mdn doc #values 了解完整定义):

• offset-x: 水平偏移
• offset-y:垂直偏移
• blur-radius:阴影外部的模糊效果
• 展开半径:纯色(无模糊)厚度
• color:这里不需要描述 :)
• 插入:(兼)如果你想让你的影子进入你的街区

为了达到你想要的效果，你需要使用 blur-radius & spread-radius 而不是 offset-xy您目前正在使用。

举个例子:

div{
  display: inline-block;
  margin: 20px;
  padding: 5px;
  background-color: #aaf;
}

#id1{
  box-shadow: 0 0 0 15px #55f;
}

#id2{
  box-shadow: 0 0 15px 15px #55f;
}

#id3{
  box-shadow: 0 0 0 2px #55f;
}

#id4{
  box-shadow: 0 0 3px 3px #55f; /* here's what you want */
}

<div id="id1">sharp thick border without blur</div>

<div id="id2">thick border with blur</div>

<div id="id3">thin border without blur</div>

<div id="id4">thin border with blur</div>

---

编辑:由于我屏幕上的颜色糟糕，所以没有看到您想要的内容。

这是片段(我将边框设为 3 像素宽，以便人们清楚地看到您在说什么)。

*{
  background-color: #ddd;
}

div{
  margin: 20px;
  width: 50px;
  height: 50px;
  border: 3px solid #aaf;
  box-shadow: 3px 3px 0 0 #00a,
              3px 3px 0 0 #00a inset;
}

<div id="id1"></div>