关于css中的border-collapse_html/css_WEB-ITnose

这个属性以前并没有怎么接触过,该属性有两种1取值:separate 和 collapse
取值的含义具体如下:
separate:边框独立
collapse:相邻边被合并
举例如下:

    
    border-collapse
    
.separate{
border-collapse: separate;
}
.collapse{
border-collapse: collapse;
}

    
        
             one
             two
             three
        
  
  
        
             one
             two
             three
        
  

最后效果:

另外表格元素table使用border-radius是不一样的,当表格样式属性border-collapse是collapse时,表格不能正常显示,只有border-collapse属性值为separate时,表格圆角才能正常显示,如将上例的css样式改成如下的时候:
    
.separate{
border-collapse: separate;border-radius: 5px;
}
.collapse{
border-collapse: collapse;border-radius: 5px;
}

    则显示的结果是:

参考地址:

http://www.css88.com/book/css/properties/table/border-collapse.htm

立即学习“前端免费学习笔记(深入)”;

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3114762.html

(0)
上一篇 2025年3月29日 12:28:30
下一篇 2025年3月29日 12:28:43

AD推荐 黄金广告位招租... 更多推荐

发表回复

登录后才能评论