时间戳

首页 > 解决方案 > 对象内的 HTML/CSS 边框阴影

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

问题描述

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

我的目标是：

目标结果

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

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

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

标签： cssbordershadow

解决方案

border-shadow最多可以使用 6 个参数（完整定义请参见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>

推荐阅读