线性渐变边框问题[重复]答案

【问题标题】：Linear gradient border issue [duplicate]线性渐变边框问题[重复]
【发布时间】：2020-09-26 07:58:41
【问题描述】：

我正在尝试通过覆盖 div 和按钮来创建线性渐变边框。问题是 div 没有完全居中在按钮下方，我不知道如何修复它（我希望它在开始弄乱它的大小之前完全覆盖）。这会导致按钮上方出现一行。无论我是否对 div 高度进行硬编码，都会发生这种情况。

额外的好处，如果我不对 div 高度进行硬编码，它会发生变化，到目前为止，我已经看到 50.5px、50.5625px、50.7px 但宽度始终为 150px。

CSS

.navbar li {
  display: flex;
  border: 1px solid black;
  height: 120px;
  font-size: 30px;
  padding: 12px;
  justify-items: center;
  align-items: center;
}

.navbar button {
  background: white;
  border: 0;
  color: #222222;
  font-size: 14pt;
  width: 150px;
  height: 50px;
  transition-duration: 0.4s;
}

.buttonBorder {
  height: 50px;
  background: var(--amethyst);
  background: linear-gradient(
    90deg,
    rgba(148, 88, 199, 1) 0%,
    rgba(92, 62, 183, 1) 100%
  );
}

HTML

<li className={styles.events}>
  <div className={styles.buttonBorder}>
      <button onClick={() => { navigate("/event-calendar")}}>
          Event Calendar
      </button>
  </div>
</li>

【问题讨论】：

标签： html css

【解决方案1】：

将按钮的高度和宽度减少 2px（每边 1px），然后在 .buttonBorder 上使用 flexbox 将其居中：

li {
  display: flex;
  border: 1px solid black;
  height: 120px;
  font-size: 30px;
  padding: 12px;
  justify-content: center;
  align-items: center;
}

button {
  background: white;
  border: 0;
  color: #222222;
  font-size: 14pt;
  width: 148px;
  height: 48px;
  transition-duration: 0.4s;
}

.buttonBorder {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 150px;
  background: linear-gradient(90deg, rgba(148, 88, 199, 1) 0%, rgba(92, 62, 183, 1) 100%);
}

<li>
  <div class="buttonBorder">
    <button>Event Calendar</button>
  </div>
</li>

【讨论】：