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

作者:vkvi 来源:千一网络(原创) 日期: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 呢?然后我发现这也解决不了问题,所以还是老老实实用上面的方法,虽然不是很完善,但是还是能实现比较贴近的效果。

你前面那位网友看了:微信小程序编程别忘了手动转换类型

▲▲▲嘿,欢迎转载传播本站原创文章,尽量保留来源噢。▲▲▲

文章评论
标题:必填
内容:
本站永远终止与捏造“罪名”不支付广告费的某度联盟合作。
vkvi
vkvi

作者简介: vkvi,致力于 .NET Web 开发、移动开发的技术推广,在 .NET、SQL Server、Windows Server 等方面有深入研究和丰富经验,10 年间共计撰写文章 4000 余篇。 主持金融、国土、农业、电商等多个行业项目执行, 推行“技术提升生产力、人心决定成功率”的管理理论。 联系他