1px突出顶部边框除了全边框？

Question

我多次尝试使用Google搜索此问题，但令人惊讶的是没有找到任何结果。

我正在尝试创建一个一直有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;