html - 1px 高亮顶部边框除了全边框？

Question

我多次尝试用谷歌搜索这个问题，但令人惊讶的是没有找到任何结果。

我正在尝试创建一个按钮，该按钮四周有一个 1px 的深色边框，但在内部也有一个 1px 的高亮边框。

此图像是我要实现的示例。有什么方法可以仅使用 CSS3/HTML 来做到这一点吗？

当前的 HTML:

<a href="register" title="Register Now" class="blue_button">Register Now</a>

当前的 CSS:

.blue_button {
    background-color: #019df6;
    background: -moz-linear-gradient(top,  #019df6 0%, #027bc1 99%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#019df6), color-stop(99%,#027bc1));
    background: -webkit-linear-gradient(top,  #019df6 0%,#027bc1 99%);
    background: -o-linear-gradient(top,  #019df6 0%,#027bc1 99%);
    background: -ms-linear-gradient(top,  #019df6 0%,#027bc1 99%);
    background: linear-gradient(to bottom,  #019df6 0%,#027bc1 99%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#019df6', endColorstr='#027bc1',GradientType=0 );
    border:1px solid #0171b1;
    padding:10px 30px;
    font-weight:600;
    font-size:150%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color:#fff;
    text-decoration:none;
}

Answer 1

Check out this jsFiddle您可以使用 box-shadow 添加额外的高光顶部“边框”，并继续使用边框，就像您在外边框上使用的那样。如果没有“插入”，突出显示将位于现有边框的外部。

box-shadow: inset 0px 1px 0px 1px white;

除了添加位置和顶部规则外，我在 jsFiddle 上使用了以下代码:

box-shadow: inset 0px 3px 2px -2px white;