我有一个ul
与1px的左边界以及其li
儿童的2px底部边框。问题是我想保持每个li
元素底部边界之间的1px空间。下面是它目前的样子:防止border-bottom“渗入”边框?
如何,我想它看起来:
正如你所看到的,一旦border-left
结束时,border-bottom
继续,在填充1px的差距。有没有办法来防止这种情况?
下面是相关HTML:
<div id="mainNav">
<ul>
<li>
<a href="#" class="mainNavLink">Leaderboards</a>
</li>
<li>
<a href="#" class="mainNavLink">Statistics</a>
</li>
<li id="mainNavSearch">Search</li>
</ul>
</div>
而CSS:
#mainNav{
width: 100%;
height: 35px;
background-color: #202020;
border-bottom: 1px solid #444;
position: relative;
overflow: hidden;
}
#mainNav ul{
width: 960px;
height: 35px;
margin: 0 auto 0 auto;
display: block;
position: relative;
}
#mainNav ul li{
float: left;
position: relative;
height: 25px;
padding: 10px;
padding-top: 8px;
padding-bottom: 0;
font-size: 17px;
border-left: 1px solid #444;
border-bottom: 2px solid #00a4ff;
background: -moz-linear-gradient(top, rgba(24,24,24,0) 60%, rgba(24,24,24,0.38) 90%, rgba(0,0,0,0.5) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,rgba(24,24,24,0)), color-stop(90%,rgba(24,24,24,0.38)), color-stop(100%,rgba(0,0,0,0.5)));
background: -webkit-linear-gradient(top, rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
background: -o-linear-gradient(top, rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
background: -ms-linear-gradient(top, rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
background: linear-gradient(to bottom, rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00181818', endColorstr='#80000000',GradientType=0);
}
#mainNavSearch{
border-right: 1px solid #444;
}
你或许可以用背景属性来做到这一点。 – twodayslate