css使两个盒子并列_css如何去掉重叠部分的边框？
在前端開發(fā)中，邊框border屬性是經(jīng)常會(huì)用到的一個(gè)屬性，它可以給元素添加邊框；但兩個(gè)相鄰的元素在一起同時(shí)添加了邊框，就會(huì)出現(xiàn)一個(gè)問題，邊框會(huì)重疊在一起（如下圖），那么如何去掉重疊部分的邊框？
web前端學(xué)習(xí)：打造全網(wǎng)web前端全棧資料庫（總目錄）看完學(xué)的更快，掌握的更加牢固，你值得擁有（持續(xù)更新）?zhuanlan.zhihu.com本篇文章就給大家介紹css解決邊框重疊，即css去掉重疊邊框的方法，讓相鄰的邊框之間可以是單線的方式顯示。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你們有所幫助。
邊框重疊可以分為兩種情況，分別為：
- 1、div，ul等元素盒子設(shè)置邊框后的重疊問題
- 2、table表格設(shè)置邊框后的重疊問題
下面我們就來介紹如何解決這些邊框重疊問題的方法，用簡單的代碼示例來講解
1、div，ul等元素盒子設(shè)置邊框后的重疊問題
<!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屬性的負(fù)值，設(shè)置元素的margin值為邊框值的相反數(shù)，就可以把重疊的部分邊框隱藏起來（被覆蓋），讓邊框以單線的形式顯示。margin負(fù)值其實(shí)是一個(gè)很常用的功能，很多特殊的布局方法都是依賴于它才可以實(shí)現(xiàn)的。
2、table表格設(shè)置邊框后的重疊問題
table{border-spacing: 0;border-collapse: collapse; } table td { border: 1px solid #000;padding: 20px 30px; }在表單中當(dāng)我們添加了邊框，又把每個(gè)單元格的邊距去除后，表單就會(huì)出現(xiàn)邊框重疊的問題，使得邊框線變粗，這時(shí)我們就可以設(shè)置border-collapse: collapse來設(shè)置邊框，它把重疊的邊框合并在一起，成為一個(gè)邊框，實(shí)現(xiàn)單線邊框的效果。
效果圖：
總結(jié)：以上就是本篇文章所介紹的css去掉重疊部分邊框的方法，希望能對(duì)大家的學(xué)習(xí)有所幫助。更多相關(guān)教程請(qǐng)關(guān)注我！
總結(jié)
以上是生活随笔為你收集整理的css使两个盒子并列_css如何去掉重叠部分的边框？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 电脑控制iphone_如何把苹果 iPh
- 下一篇： pypark hive 开启动态分区_H