0

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

我正在尝试创建一个按钮，该按钮一直有一个 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;
}
4

1 回答 1

2

看看这个 jsFiddle你可以使用 box-shadow 添加额外的高亮顶部“边框”，并继续使用边框，就像你对外边框使用它一样。如果没有“插图”，突出显示将位于现有边框的外部。

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

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

box-shadow: inset 0px 3px 2px -2px white;
于 2013-03-19T00:44:18.613 回答