大纲里面的按钮

Question

我一直试图复制这个“订阅时事通讯按钮”。我很难复制白色的“内部边框或轮廓”。 example of the button

Answer 1

您可以使用插入阴影

button {
  background:turquoise;
  border:solid turquoise;
  padding:5px;
  box-shadow:inset 0 0 0 3px white;

<button>inside border ?</button>

您还可以将边框与插入和开始阴影混合http://codepen.io/gcyrillus/pen/yJfjl;）

Answer 2

您可以通过border-radius和box-shadow的组合简单地实现此按钮样式：

button {
  background: darkcyan;
  border: 7px solid darkcyan;
  color: white;
  font-size: 1.5em;
  text-transform: uppercase;
  padding: 20px 30px;
  border-radius: 15px;
  box-shadow: inset 0 0 0 2px white;
}

<button>Subscribe to newsletter</button>

使用border规则设置外边框，并使用border-radius围绕边角。这也会影响盒子阴影，它会产生内部的白色边框线。