Question

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

我能得到的最接近的是以下内容，但是底部边框的右下角未正确舍入：

＆GT;

.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;
}

＆GT;

我觉得这应该只使用盒子阴影，但似乎没有办法修改盒子阴影的宽度，只是正确插入黑色部分。

Answer 1

因此，我们的想法是让.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; }。

<button class="login__button">LOG IN</button>

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

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

#' @import DBI
setClass("KazamDriver", contains = "DBIDriver")

Answer 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;
}

<a href="#" class="login__button">Link</a>

Answer 3

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 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;
}

<button class="login__button">LOG IN</button>

使用CSS在按钮上定期边框+偏移边框

4 个答案: