CSS 如何做到像图中一样隐藏边框的某一段？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3461 天前的主题，其中的信息可能已经有所发展或是发生改变。

rt，想要做到如图这样的效果，上面的ul的棕色底部边框的一小段是白色的。

首先按照找到的源码大致意思：

ul {border-bottom: 2px solid #8B4513;}
li:hover {border-bottom: 2px solid #FFF;}

具体就是让li的底部边框挡住ul底部边框的那部分，然而效果并不是挡住，而是li的白色底部边框往下挤ul的棕色边框。

另外sf里面也有类似的部分，使用的大概是这样：

li {border: 1px solid grey;}
ul {border-top: 1px solid grey;}
li:hover {border-bottom-color: transparent;}

基本大同小异，问题也是相似的，li原有的边框的底部把ul的边框挤开了。。。

实在思考不出怎么办。。新手求助，谢谢！

3 条回复

Septembers

2015-06-05 20:17:59 +08:00 via Android

Bardon

2015-06-05 22:19:40 +08:00

定义 position 没

rundis

2015-06-06 11:53:11 +08:00

@Septembers
@Bardon
谢谢，已经解决了！