在 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>

如何在边框上应用 highlight/shadow？

Answer 1

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

注意：我使用 border-style: ridge 使边框看起来像你的 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 颜色选择;

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

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

Apply box shadow to border in css

html

css

styles

shadow