请教一个和 border 有关的 CSS 样式的问题

V2EX = way to explore

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

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

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

123456789 等等一些数字横向排列，每个数字在一个 div 中，会随机（不确定数量，也不确定是哪个数字）赋予某个 div 一个四面的边框，如何解决诸如，1 和 2 两个 div 都有边框时的边框叠加变粗问题呢？写一个方法专门计算哪个 border 有哪个 border 没有也太复杂了。或者改变实现方式？不使用 div 来包裹数字？有没有简单一些的办法呢

div

border

边框

数字

8 条回复 • 2023-05-31 19:02:43 +08:00

Mikawa

2023-05-31 16:39:50 +08:00

用 box-shadow 代替 border 试试

noe132

2023-05-31 16:49:25 +08:00 via Android

很简单给有边框的元素一个 class
然后写
.has-border + .has-border
border-left: none;

LandCruiser

2023-05-31 16:52:42 +08:00

@Mikawa 感觉是一样的，主要我这个问题是不固定哪个数字有边框，是动态的

lupkcd

2023-05-31 16:55:42 +08:00 via Android

margin-left: -1px

LandCruiser

2023-05-31 16:56:25 +08:00

@noe132 这个方法可以了，都忘记有 + 这个东西了

ashong

2023-05-31 17:00:48 +08:00

.number {
border: solid 1px grey;
}
.number:not(:last-of-type){
border-right: none;
}

Mikawa

2023-05-31 17:55:16 +08:00

@LandCruiser #3 因为 box shadow 不占文档流，如果是实色边框的话，这么搞就不用纠结了🤣，平时经常拿 box-shadow 来模拟边框、outline ，尤其是 a11y 里的

qzhai

2023-05-31 19:02:43 +08:00 via iPhone

用伪元素 before 或 after
显示数字的盒子不要加 border 并设置相对定位。
设置其 before 绝对定位宽高 100%，上下左右都是零，设置 box-sizing 默认然后加 border ，最好不要在这里这 bordercolor ，在 active 后加上颜色。
这样相近的边框会重叠。