html - 按钮元素的边框距实际末端 1 px

Question

快速简单的问题，

有没有一种快速改变按钮的方法，从边框边缘到元素的“真实”边缘的距离。

我不想让边框更远，我希望背景在边框边缘上多传播 1 或 2 像素。

Google 没有向我展示正确的解决方案，或者我正在使用错误的术语进行搜索，希望你们中的一些人能帮助我。

由于我的问题不清楚，这里是一张尝试实现的图片

https://picload.org/view/rpogroor/test.png.html

Answer 1

这里需要用到的是伪元素。诀窍是有一个普通按钮，但不使用边框。相反，使用一个 :after 伪元素，并使用 CSS 定位，我们可以模拟出你想要的效果，即背景扩展到虚线边框之外。

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}


button {
  -webkit-appearance: none;
  background: #ede032;
  padding: 10px 20px;
  border-radius: 20px;
  border: 0;
  position: relative;
  margin: 40px;
}

button:after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  left: 3px;
  bottom: 3px;
  border: 1px dashed #515151;
  border-radius: 20px;
}

<button>Hello There</button>

这里的代码很容易解释。我有一个简单的 button，我在其中设置了一些基本样式，例如 background、border-radius 等等。后来，我有一个 :after 伪，我在其中使用虚线 border，然后我使用 CSS 定位将其覆盖在 button 上。