对象内的 HTML/CSS 边框阴影答案

【问题标题】：HTML/CSS border shadow inside object对象内的 HTML/CSS 边框阴影
【发布时间】：2019-07-18 08:23:38
【问题描述】：

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

我的目标是：

但是没有添加带有负 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;
}

*带有图标的盒子只是为了展示我想要的效果，而不是我需要它的唯一盒子。

如果没有第二个带有边框的对象，是否有可能实现这种效果？

【问题讨论】：

标签： css border shadow

【解决方案1】：

border-shadow 最多可以接受 6 个参数（完整定义请参见mdn doc #values）：

offset-x：水平偏移
offset-y：垂直偏移
blur-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>

编辑：没有看到你想要的，因为我的屏幕颜色很糟糕。

这是 sn-p（我将边框设置为 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;
}

&lt;div id="id1"&gt;&lt;/div&gt;

【讨论】：

并不是我的目标。我的目标是一个实心的 1px 阴影，比如边框，既是插入的，又不是同时的，两者的 offset-xy 都是 1px。
哇，抱歉我没有看到细像素边框：o - 将编辑我的帖子
感谢您的宝贵时间。自从我在 css 中使用 box-shadow 以来，从未真正意识到可以一次使用 2 个值。
是的，mdn doc 不包含此类信息（以及一般的所有单行）很不方便。
在过去的一个小时里，我一直在努力想弄清楚一切而没有意识到这一点，甚至考虑用 js 技巧添加另一个对象来匹配第二个边框的宽度和高度，现在我终于可以了继续做其他事情。