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 can take up to 6 arguments (see the mdn doc #values 以获得完整定义）：

offset-x: 水平偏移
offset-y: 垂直偏移
blur-radius: 阴影外部的模糊效果
spread-radius: 纯色（无模糊）厚度
颜色：这里不需要描述 :)
插图：（兼）如果你想让你的影子进入你的街区

为了达到您想要的效果，您需要使用 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>

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

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

*{
  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>

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

HTML/CSS border shadow inside object

css

border

shadow