创造内在边界

Question

我正在尝试在HTML / CSS中创建如下按钮。什么是创建略微位于按钮实际边缘内的白色边框的最佳方法？我正在使用ASP.net。

提前致谢！

Answer 1

使用嵌套插入框阴影，您可以创建 this ：

使用纯一个 html标记：

<button> view your receipts </button>

和一些css：

button {
    width: 200px;
    font-weight: bold;
    height: 55px;
    line-height: 55px;
    border-radius: 17px;
    background-color: #ffd28a;
    border: none;
    box-shadow:
            0 0 0  9px  #ffd28a inset,
            0 0 0 11px  #FFFFFF inset;
    color: red;
    box-sizing: content-box;
}

Answer 2

这里有很多固定值，但只是为了展示一个例子

<style type="text/css">
   .button { border: 3px solid orange; width: 300px; height: 50px; border-radius: 15px}
   .button a { background: orange; border: 1px solid #fff; line-height: 46px; border-radius:12px; color: red; text-align: center; margin:1px; display: block;}
</style>

<div class="button">
  <a href="#">Submit</a>
</div>