如何将盒子阴影添加到 webkit-box-reflect？

Question

我正在尝试为下面的按钮反射添加阴影。我已经为这个问题添加了按钮的图片。希望有解决办法:)

HTML 按钮

[![CSS
/* From uiverse.io by @SylviaMakuch */
button {
 font-family: monospace;
 font-size: large;
 height: 2.5em;
 width: 7.0em;
 border-radius: 1.875em;
 background: radial-gradient(#c2fcff, #03e9f4);
 color: #050801;
 border: 0em;
 cursor: alias;
 box-shadow: 0 0 0.313em  #03e8f4, 0 0 0.313em #03e9f4, 0 0 0.313em #00f2ff,
    0 0 50px #03e9f4;
 -webkit-box-reflect: below 0 linear-gradient(transparent, #0005);
}


button:hover {
 box-shadow: 0 0 0.313em #03e9f4, 0 0 1.7em #03e9f4, 0 0  #03e9f4,
      0 0 150px #03e9f4;
}][1]][1]

谢谢！

Answer 1

您需要一个 DIV 元素，它在下图上方提供渐变。

由于DIV元素在图片下方，我们可以使它的位置相对并提供负边距，与图片高度相同，所以DIV可以移动到图片上方.

确保负边距与图片高度相同，但为负边距。

body {
  background: black;
}

img {
  content:url(https://freepngimg.com/thumb/click_here/5-2-click-here-png-pic.png);
}

.size {
  width: 180px;
  height: 66px;
}

.block {
  display: block;
  padding: 0;
  margin: 0;
}

.flip-vertically {
  transform: scaleY(-1);
}

.fade-gradient {
  background: linear-gradient(rgba(0, 0, 0, 0), rgb(0, 0, 0));
  margin-top: -66px;
  position: relative;
}

<img id="top" class="size block">

<img id="bottom" class="size block flip-vertically">
<div class="size fade-gradient"></div>

希望对您有所帮助。如果我的回答不是您要搜索的内容，请告诉我，以便我将其删除。

Answer 2

使用 drop-shadow 而不是 box-shadow。也停止使用多个元素，只需将按钮包裹在 div 中，然后使用另一个 div 进行反射。

请参阅以下示例以更好地理解。

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
  background-color: #040408;
}

.container {
  position: relative;
  overflow: visible;
}

button {
  position: relative;
  border: 0;
  color: #050801;
  cursor: pointer;
  font-size: 1.25rem;
  padding: 1.5rem 2rem;
  border-radius: 60rem;
  font-family: Inter, sans-serif;
  background-image: radial-gradient(#c2fcff, #03e9f4);
  filter: drop-shadow(0 0 0.313rem #03e8f4) drop-shadow(0 0 0.313rem #03e9f4) drop-shadow(0 0 0.313rem #00f2ff) drop-shadow(0 0 50px #03e9f4);
}

.reflection {
  position: absolute;
  inset: 100% 0 0 0;
  width: 100%;
  height: 100%;
  display: grid;
  color: #050801;
  font-size: 1.25rem;
  place-items: center;
  border-radius: 60rem;
  pointer-events: none;
  transform: scaleY(-1);
  font-family: Inter, sans-serif;
  background: radial-gradient(#c2fcff7a, #03e9f4de);
}

<div class="container">
  <button>Hello, World!</button>
  <div class="reflection">Hello, World!</div>
</div>

如何将盒子阴影添加到 webkit-box-reflect？

How to add box shadow to webkit-box-reflect?

html

css

user-interface