css - 如何在纯css中创建不接触边缘的双边框？

Question

在导航设计中，我需要提供这样的边框。我知道如何创建双边框，但不知道如何创建顶部和底部有一些间隙的边框。

我知道它可以使用图像来完成，但很想知道是否可以只用 CSS 制作

Answer 1

是的，只需使用 CSS 即可轻松完成。

演示

HTML：

<ul class='navigation'>
    <li><a href='#'>nav item</a></li>
    <!-- as many navigation items as you would like -->
    <li><a href='#'>nav item</a></li>
</ul>

相关CSS：

.navigation { padding: 0; list-style: none; }
.navigation li {
    float: left;
    padding: .35em 0;
    border-top: solid 2px #e4e4e3;
    border-bottom: solid 3px #94a10f;
    background: linear-gradient(#fafafa, #e5e5e5);
}
.navigation a {
    display: block;
    padding: .5em;
    border-left: solid 1px #fff;
    border-right: solid 1px #a4a4e3;
    color: #000;
    text-decoration: none;
}
.navigation li:first-child a { border-left: none; }
.navigation li:last-child a { border-right: none; }

---

或者，如果您不想在 top 和 bottom 有不可点击的区域，您可以尝试另一种方式：

演示

CSS：

.navigation {
    display: inline-block;
    overflow: hidden;
    padding: .35em 0;
    border-top: solid 2px #e4e4e3;
    border-bottom: solid 3px #94a10f;
    background: linear-gradient(#fafafa, #e5e5e5);
    list-style: none;
}
.navigation li {
    float: left;
    border-left: solid 1px #fff;
    border-right: solid 1px #a4a4e3;
}
.navigation a {
    display: block;
    padding: .5em;
    margin: -.35em 0;
    color: #000;
    text-decoration: none;
}
.navigation li:first-child { border-left: none; }
.navigation li:last-child { border-right: none; }

---

第三种方法，也将可点击区域扩展到边框，是在链接上使用伪元素来获得横向边框。

演示

CSS：

.navigation { margin-top: 7em; list-style: none; }
.navigation li {
    float: left;
    background: linear-gradient(#fafafa, #e5e5e5);
}
.navigation a {
    display: block;
    position: relative;
    padding: .85em;
    border-top: solid 2px #e4e4e3;
    border-bottom: solid 3px #94a10f;
    color: #000;
    text-decoration: none;
}
.navigation a:before {
    position: absolute;
    top: .35em; bottom: .35em; left: 0;
    border-right: solid 1px #fff;
    border-left: solid 1px #a4a4e3;
    content: '';
}
.navigation li:first-child a:before { border: none; }