§ ITPOW >> 文档 >> CSS

圆角边框 border-radius 在 border-collapse:collapse 的 table 中无效?

作者:vkvi 来源:ITPOW(原创) 日期:2018-4-3

看一个没有指定 border-collapse 的代码和样式:

border-radius

是圆角,但是我想边框 collapse:

collapse

怎么回事?难道圆角边框遇到 border-collapse:collapse 不起作用?不急,让我们加上背景色看看:

border-radius

原来圆角起作用了,只是这个圆角有点特别。如果我们的边框和背景是一个颜色,到这里就已经完美了,可是问题是现在不想让边框和背景一个颜色。

所以我们试着取消四个角的边框,发现光给 td 指定 border:none; 取消不了,还得给 table 指定 border:none;,既然这么麻烦,我们干脆不用 border="1",而直接用 CSS 给 td 指定边框,然后再取消四个角的边框:

border-radius

看来那四个角虽然是圆角了,但是它的“边”没办法圆。这个效果不是很好看,可以改一下:让最外围的 td 的外围边框都不要显,这样应该好点。看代码和样式:

table 的 border-radius

这下看起来舒服多了。

后来我想,能不能为四个角的 td 设置 border-radius 呢?然后我发现这也解决不了问题,所以还是老老实实用上面的方法,虽然不是很完善,但是还是能实现比较贴近的效果。

相关文章