問題描述

我要實現(xiàn)下圖中的效果：排隊人數(shù)后面沒有灰色的線。由于項目是UI重構(gòu)，所以得盡可能減少結(jié)構(gòu)上的差異，我現(xiàn)在實際做出的效果是排隊人數(shù)后面有父盒子的灰色border，請教大神們，有木有什么辦法用子盒子的背景色覆蓋父盒子的border。請賜教！

問題解答

可以使用定位，讓子元素浮起來。假設父元素是100%寬度邊框是黑色，可以將子元素設置為102%,將其背景色設置為red,從而讓背景色可以將父盒子左右邊框覆蓋。

可以用：before和：after來實現(xiàn)：html

<p class='father'> <p class='child'></p></p>

css

.father{ border: 2px solid #000; position: relative; width: 200px;}.child{ height: 100px; background-color: red;}.father:before{ content: ''; width: 2px; height: 100px; position: absolute; background: red; right: -2px; top: 0;}

效果

用偽元素把border遮住~-----------------------2017.4.12 補充---------------------------我給child加了偽元素，也是可以的呢

.father{ border: 2px solid #000; position: relative; width: 200px;}.child{ height: 100px; background-color: red;}.child:before{ content: ''; width: 2px; height: 100px; position: absolute; background: red; right: -2px; top: 0;}

效果同上，為了使效果更明顯，我把子元素的寬設成100px，效果如下：

這樣也是可以的呢~不知道我理解你的意思理解的對不對...以上，醬紫！

親，是否考慮把border的框架去掉呢？

如果這樣子說，這樣子不更快？？？