如何將盒子陰影添加到webkit-box-reflect？-有解無憂

如何將盒子陰影添加到 webkit-box-reflect？我正在嘗試在下面的按鈕反射中添加陰影。我已經為這個問題添加了按鈕的圖片。希望有解決辦法：）

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]

謝謝！

uj5u.com熱心網友回復：

您需要的是一個 DIV 元素，它在下圖上方提供漸變。

由于 DIV 元素位于影像下方，我們可以使其位置相對并提供與影像相同高度的負邊距，因此 DIV 可以在 IMAGE 上方移動。

確保負邊距與影像具有相同的高度但為負值。

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>

我希望這能夠幫到你。如果我的答案不是您要搜索的內容，請告訴我，以便我將其洗掉。

uj5u.com熱心網友回復：

而不是使用box-shadowuse drop-shadow。也停止使用多個元素，只需將您的按鈕包裝在 a 中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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/461129.html

標籤：html css 用户界面

上一篇：獨立運行兩個Tk()主回圈的正確方法，第二個從第一個腳本開始？

下一篇：這個gtk小部件叫什么