成人在线亚洲_国产日韩视频一区二区三区_久久久国产精品_99国内精品久久久久久久

您的位置:首頁技術文章
文章詳情頁

css - 有沒有什么辦法用背景色把部分border給遮擋呢?

瀏覽:121日期:2023-06-23 16:22:55

問題描述

我要實現下圖中的效果:排隊人數后面沒有灰色的線。由于項目是UI重構,所以得盡可能減少結構上的差異,我現在實際做出的效果是排隊人數后面有父盒子的灰色border,請教大神們,有木有什么辦法用子盒子的背景色覆蓋父盒子的border。請賜教!css - 有沒有什么辦法用背景色把部分border給遮擋呢?

問題解答

回答1:

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

回答2:

可以用:before和:after來實現: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;}

效果

css - 有沒有什么辦法用背景色把部分border給遮擋呢?

用偽元素把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,效果如下:

css - 有沒有什么辦法用背景色把部分border給遮擋呢?這樣也是可以的呢~不知道我理解你的意思理解的對不對...以上,醬紫!

回答3:

親,是否考慮把border的框架去掉呢?

回答4:

css - 有沒有什么辦法用背景色把部分border給遮擋呢?如果這樣子說,這樣子不更快???

標簽: CSS
相關文章: