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

Question

在导航设计中，我需要像这样给出边框。我知道how to create double border但不知道如何创建在顶部和底部有一些间隙的边框。

我知道可以使用图片完成，但很想知道是否可以在CSS中制作

Answer 1

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

demo

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; }

---

或者，如果您不希望在顶部和底部有一个不可点击的区域，您可以尝试另一种方式：

demo

<强> 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; }

---

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

demo

<强> 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; }