css使两个盒子并列_css如何去掉重叠部分的边框？
生活随笔
收集整理的這篇文章主要介紹了
css使两个盒子并列_css如何去掉重叠部分的边框？
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在前端開發中，邊框border屬性是經常會用到的一個屬性，它可以給元素添加邊框；但兩個相鄰的元素在一起同時添加了邊框，就會出現一個問題，邊框會重疊在一起（如下圖），那么如何去掉重疊部分的邊框？
web前端學習：打造全網web前端全棧資料庫（總目錄）看完學的更快，掌握的更加牢固，你值得擁有（持續更新）?zhuanlan.zhihu.com本篇文章就給大家介紹css解決邊框重疊，即css去掉重疊邊框的方法，讓相鄰的邊框之間可以是單線的方式顯示。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。
邊框重疊可以分為兩種情況，分別為：
- 1、div，ul等元素盒子設置邊框后的重疊問題
- 2、table表格設置邊框后的重疊問題
下面我們就來介紹如何解決這些邊框重疊問題的方法，用簡單的代碼示例來講解
1、div，ul等元素盒子設置邊框后的重疊問題
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>邊框重疊</title><style>ul li{list-style: none;}.demo{width: 310px;height: 205px;margin: auto;padding: 10px;border: 1px solid red;margin-bottom:-1px ;}.demo li{width: 100px;height: 100px;float: left;border: 1px solid #000000;margin:0px -1px -1px 0px ;}</style></head><body><div class="demo"><ul><li></li><li></li><li></li><li></li><li></li><li></li></ul></div><div class="demo"><ul><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></body> </html>效果圖：
在上例中，我們使用了margin屬性的負值，設置元素的margin值為邊框值的相反數，就可以把重疊的部分邊框隱藏起來（被覆蓋），讓邊框以單線的形式顯示。margin負值其實是一個很常用的功能，很多特殊的布局方法都是依賴于它才可以實現的。
2、table表格設置邊框后的重疊問題
table{border-spacing: 0;border-collapse: collapse; } table td { border: 1px solid #000;padding: 20px 30px; }在表單中當我們添加了邊框，又把每個單元格的邊距去除后，表單就會出現邊框重疊的問題，使得邊框線變粗，這時我們就可以設置border-collapse: collapse來設置邊框，它把重疊的邊框合并在一起，成為一個邊框，實現單線邊框的效果。
效果圖：
總結：以上就是本篇文章所介紹的css去掉重疊部分邊框的方法，希望能對大家的學習有所幫助。更多相關教程請關注我！
總結
以上是生活随笔為你收集整理的css使两个盒子并列_css如何去掉重叠部分的边框？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 电脑控制iphone_如何把苹果 iPh
- 下一篇： pypark hive 开启动态分区_H