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

用偽元素把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的框架去掉呢?
回答4:
如果這樣子說,這樣子不更快???
相關文章:
1. 關于docker下的nginx壓力測試2. docker - 各位電腦上有多少個容器啊?容器一多,自己都搞混了,咋辦呢?3. mac里的docker如何命令行開啟呢?4. 關docker hub上有些鏡像的tag被標記““This image has vulnerabilities””5. nignx - docker內nginx 80端口被占用6. docker容器呢SSH為什么連不通呢?7. dockerfile - 我用docker build的時候出現下邊問題 麻煩幫我看一下8. docker-compose 為何找不到配置文件?9. docker start -a dockername 老是卡住,什么情況?10. angular.js使用$resource服務把數據存入mongodb的問題。

網公網安備