html - 从按钮链接中删除一个像素 "border-radius"

Question

当我尝试使用 overflow: hidden; 隐藏按钮上的背景效果时遇到问题。我在 Chrome 中看到 border-radius 周围有一个像素:

如何隐藏这些像素？我可以尝试使用 box-shadow，但也许您知道更简单的方法。

JsFiddle

<a href="#" class="btn hvr-shutter-in-horizontal">test</a>

CSS:

.btn {
  margin: 20px;
  padding: 10px 30px;
  font-size: 14px;
  text-transform: uppercase;
  color: #fff;
  border: 2px solid #f0913a;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  cursor: pointer;
  overflow: hidden; /* <-- I try hide background but always get http://screencast.com/t/qktgZwmVtH */
}

.hvr-shutter-in-horizontal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  background: #181818;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
}

.hvr-shutter-in-horizontal:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #f0913a;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.hvr-shutter-in-horizontal:active:before,
.hvr-shutter-in-horizontal:focus:before,
.hvr-shutter-in-horizontal:hover:before {
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

Answer 1

你可以使用嵌入阴影:

.btn {
  margin: 20px;
  padding: 10px 30px;
  font-size: 14px;
  text-transform: uppercase;
  color: #fff;
  border: 2px solid #f0913a;
  border-radius: 20px;
  cursor: pointer;
  overflow:hidden;
}
.hvr-shutter-in-horizontal {
  display: inline-block;
  vertical-align: middle;
}
.hvr-shutter-in-horizontal:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -50px;
  bottom: -50px;
  left: 0px;
  right: 0px;
  background: #f0913a;
  transition: 0.5s;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0 #181818;
}
.hvr-shutter-in-horizontal:active:before,
.hvr-shutter-in-horizontal:focus:before,
.hvr-shutter-in-horizontal:hover:before {
  box-shadow: inset 0 0 0 150px #181818;
}

<a href="#" class="btn hvr-shutter-in-horizontal">test</a>

它没有根除 bug，但黑色不再流血了。

---

为了避免错误，使用另一种方法，您可以使用背景图像，例如 css 渐变，并在悬停时调整它的大小(也不涉及伪造)。示例:

.btn {
  margin: 20px;
  padding: 10px 30px;
  font-size: 14px;
  text-transform: uppercase;
  color: #fff;
  border: 2px solid #f0913a;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(black, black) left no-repeat, linear-gradient(black, black) right no-repeat #f0913a;
  background-size: 0 100%;
  transition: background-size 0.3s;
}
.hvr-shutter-in-horizontal {
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
.hvr-shutter-in-horizontal:active,
.hvr-shutter-in-horizontal:focus,
.hvr-shutter-in-horizontal:hover {
  background-size: 100% 100%;
}

<a href="#" class="btn hvr-shutter-in-horizontal">test</a>