在css中将框阴影应用于边框

Question

我在 Figma 中设计了这个按钮，并希望将其应用到 CSS 中。

如果您仔细观察，您会发现我在边框上应用了带有白色阴影的高光

但是当我使用以下 CSS 行时，它只是在内部有一个阴影，而不是像这张图片显示的那样在边框上。

div {
  border-style: solid;
  border-width: 0.7em;
  border-color: var(--highlight);
  box-shadow: inset 0.2em 0.2em 0.4em rgba(255, 255, 255, 0.25), inset -2px -2px 4px rgba(0, 0, 0, 0.25);
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25));
}

<div> Sign Up </div>

如何在边框上应用高光/阴影？

Answer 1

我正在尝试创建看起来像您的 Figma 设计的 div， 我使用普通（初始）box-shadow 和 inset box-shadow 的组合。 一开始是用来给明亮的阴影，让div看起来更强烈，我看到figma显示更暗的内阴影，让边框看起来有点3D。

注意：我使用 border-style: ridge 来使边框看起来像 Your Figma 中所示的 3D，您可以使用 border-style:solid 使其变平 [下面附上截图

body{
  background-color: rgb(50, 53, 90);
}
div {
  width: 100px;
  margin: auto;
  color: white;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: .6rem;
  text-align: center;
  border-style: ridge;
  border-width: 0.2em;
  border-color: rgb(251, 55, 102);
  box-shadow:  0em 0em 1.5px rgba(255, 255, 255, 0.25), inset 0px 0px 5px rgba(0, 0, 0, 0.25);
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25));
}

Using border-style: ridge

body{
  background-color: rgb(50, 53, 90);
}
div {
  width: 100px;
  margin: auto;
  color: white;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: .6rem;
  text-align: center;
  border-style: solid;
  border-width: 0.2em;
  border-color: rgb(251, 55, 102);
  box-shadow:  0em 0em 1.5px rgba(255, 255, 255, 0.25), inset 0px 0px 5px rgba(0, 0, 0, 0.25);
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25));
}

Using border-style: solid

对不起，如果这不是你想要的，希望你喜欢我的回答

Answer 2

<style> 
#example3 {
  border: 10px solid red;
  border-radius: 5px
}
#bg{
background-color: #000;
color: #fff;
padding: 20px;
text-align: center
}
</style>

<div id="bg">
<div id="example3">
  <p>A pink shadow.</p>
</div>
</div>

Answer 3

Image showing box shadow effect> box-shadow: 0 0 25px 颜色选择；

这将在图像或块周围创建一个微弱的阴影。 确保颜色与您的背景颜色匹配。