CSS：是否可以讓按鈕的框陰影的50%為一種顏色，而另外50%為另一種顏色？-有解無憂

在 CSS：是否可以讓按鈕的框陰影的 50% 為一種顏色，而另外 50% 為另一種顏色？

這里有一些代碼可以嘗試：

* {
margin: 0;
padding: 0;
}

#button {
margin-left: 20px;
margin-top: 20px;
padding: 20px;
box-shadow: 0 0 30px blue;
display: inline-block;
width: 200px;
text-align: center;
}

<div id="button">Button</div>

那可能嗎？也許使用兩層？它通常看起來完全像是一個簡單的陰影，因為它會與其他按鈕混合，并且只有一個應該有兩種顏色的陰影。如果陰影風格完全不同，那就很奇怪了。將非常感謝您的幫助！

uj5u.com熱心網友回復：

我會為按鈕的每一半使用一個元素，用適當的框陰影剪輯一個與整個按鈕大小相同的框。

body {
  padding: 40px;
}

.thing {
  background-color: transparent;
  border: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.thing-shadow {
  height: 100%;
  overflow: hidden;
  padding: calc(2 * var(--thing-shadow-radius));
  position: absolute;
  top: calc(-2 * var(--thing-shadow-radius));
  width: 50%;
  z-index: -1;
}

.thing-shadow::before {
  content: '';
  position: absolute;
  left: calc(2 * var(--thing-shadow-radius));
  top: calc(2 * var(--thing-shadow-radius));
  right: calc(2 * var(--thing-shadow-radius));
  bottom: calc(2 * var(--thing-shadow-radius));
}

.thing-shadow-left {
  left: calc(-2 * var(--thing-shadow-radius));
  padding-right: 0;
}

.thing-shadow-right {
  right: calc(-2 * var(--thing-shadow-radius));
  padding-left: 0;
}

.thing-shadow-left::before {
  box-shadow: 0 0 var(--thing-shadow-radius) var(--thing-shadow-left);
  right: calc(-1 * var(--thing-shadow-radius));
}

.thing-shadow-right::before {
  box-shadow: 0 0 var(--thing-shadow-radius) var(--thing-shadow-right);
  left: calc(-1 * var(--thing-shadow-radius));
}

#button {
  --thing-shadow-left: red;
  --thing-shadow-right: blue;
  --thing-shadow-radius: 40px;
  margin-left: 20px;
  margin-top: 20px;
  padding: 20px;
  width: 200px;
  text-align: center;
}

<button type="button" class="thing" id="button">
  <span class="thing-shadow thing-shadow-left"></span>
  <span class="thing-shadow thing-shadow-right"></span>
  Button
</button>

uj5u.com熱心網友回復：

這幾乎可以在沒有額外標記的情況下完成，但是偽元素上的 box-shadow 仍然會覆寫按鈕，因此按鈕內部需要額外的 div 來提供按鈕背景顏色并覆寫按鈕內部的陰影。

* {
  margin: 0;
  padding: 0;
}

#button {
  margin-left: 20px;
  margin-top: 20px;
  border: 1px solid grey;
  width: 200px;
  text-align: center;
  position: relative;
  z-index: 2;
}

#button div {
  padding: 20px;
  background-color: #ccc;
}

#button:before,
#button:after {
  position: absolute;
  content: " ";
  display: block;
  width: 50%;
  height: 100%;
  z-index: -1;
  top: 0;
}

#button:before {
  box-shadow: 0 0 15px blue;
  left: 0;
}

#button:after {
  box-shadow: 0 0 15px red;
  right: 0;
}

<div id="button">
  <div>
Button
  </div>
</div>

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

標籤：css

上一篇：將元素與居中的flexbox內的底角對齊

下一篇：CSS：相對于容器的單位，而不是視口？