使用CSS的按钮上的常规边框+偏移边框答案

【问题标题】：Regular border + offset border on button using CSS使用CSS的按钮上的常规边框+偏移边框
【发布时间】：2017-07-01 19:23:15
【问题描述】：

css button with double border

我正在尝试在上面的按钮上实现相同的边框效果。

我能得到的最接近的是以下，但底部边框的右下角没有正确圆角：

.login__button {
  background: transparent;
  border: none;
  border-width: 2px 1px 2px 2px;
  border-style: solid;
  border-color: pink;
  border-radius: 4px;
  color: pink;
  margin-bottom: 100px;
  position: relative !important;
  text-transform: uppercase;
  height: 33px;
  width: 102px;
  box-shadow:
    3.5px 4px 0px black,
    1.5px 0px 0px pink,
    3.5px 4px 0px black,
    2px 6px 0px pink;
}

.login__button::before {
  background: pink;
  content: '';
  position: absolute;
  height: 35px;
  width: 3.0px;
  border-radius: 3px;
  top: 3%;
  right: -2.8px;
}

我觉得这应该可以只使用 box-shadows，但似乎没有办法修改 box shadow 的宽度以正确插入黑色部分。

【问题讨论】：

标签： html css button web frontend

【解决方案1】：

所以想法是让.login__button:before 看起来与.login__button 基本相同，但要改变定位，并赋予z-index 比.login__button 更低的位置。

.login__button {
  background-color: black;
  border: 2px solid #FF00A0;
  border-radius: 4px;
  color: #FF00A0;
  position: relative;
  font-size: 15px;
  height: 33px;
  width: 102px;
  cursor: pointer;
}
.login__button:before {
  content: '';
  background-color: black;
  border: 2px solid #FF00A0;
  border-radius: 4px;
  position: absolute;
  width: 100%;
  height: 34px;
  top: -2px;
  left: -2px;
  z-index: -1;
  cursor: pointer;
  box-shadow: 0 0 20px rgb(255,0,160);
}
.login__button:active {
  background-color: gold;
}
.login__button:active:before {
  background-color: gold;
}

&lt;button class="login__button"&gt;LOG IN&lt;/button&gt;

为了它，我添加了一个样式，然后按钮被按下。

.login__button:active {
  background-color: gold;
}
.login__button:active:before {
  background-color: gold;
}

【讨论】：

你是救星！

【解决方案2】：

这是我的尝试。

.login__button {
  background: black;
  border: 4px solid #FF69B4;
  color: #FF69B4;
  position: relative;
  text-transform: uppercase;
  padding: 1em;
  display: inline-block;
  border-radius: 3px;
 }

.login__button::before {
  content: '';
  background: black;
  border: 4px solid #FF69B4;
  margin-left: -4px;
  position: absolute;
  border-radius: 3px;
  width: 100%;
  height: 100%;
  top: 12px;
  left: 0;
  z-index: -1;
}

&lt;a href="#" class="login__button"&gt;Link&lt;/a&gt;

【讨论】：

【解决方案3】：

我不知道这是否是您正在寻找的，但这就是我可能会做的。

#a, #b{
  border: 2px solid magenta;
  border-radius: 4px;
}
#a{
  border-top: none;
  width: 20%;
  box-shadow: 0 0 8px magenta;
  background: linear-gradient(to bottom, magenta 0%, black 24%);
}
#b{
  color: magenta;
  background-color: black;
  padding: 4px;
  margin-bottom: 4px;
  text-align: center;
}

<div id='a'>
<div id='b'>
Button
</div>
</div>

【讨论】：

【解决方案4】：

* {
  box-sizing: content-box;
}

body { padding: 50px; }

.login__button {
  border: 2px solid fuchsia;
  border-radius: 4px;
  color: fuchsia;
  background: black;
  text-transform: uppercase;
  height: 33px;
  width: 102px;
  position: relative;
  box-shadow: 0 8px 20px 8px rgba(227,37,243,0.3);
}

.login__button::before {
  background: black;
  border: 2px solid fuchsia;
  content: '';
  position: absolute;
  border-radius: 4px;
  width: 100%;
  height: 5px;
  bottom: -7px;
  left: -2px;
}

&lt;button class="login__button"&gt;LOG IN&lt;/button&gt;

【讨论】：