問題描述

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

問題解答

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

可以用：before和：after來(lái)實(shí)現(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 補(bǔ)充---------------------------我給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;}

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

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

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

如果這樣子說(shuō)，這樣子不更快？？？