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,效果如下:
这样也是可以的呢~不知道我理解你的意思理解的对不对...以上,酱紫!
回答3:亲,是否考虑把border的框架去掉呢?
回答4:如果这样子说,这样子不更快???
相关文章:
1. javascript - 百度地图自己的产品可以精确定位,为什么我调用他的公开API却必须经过用户同意才能获取精确定位,而且还慢?2. 后台系统的左侧导航窗格如何修改3. 网页爬虫 - Python爬虫入门知识4. mysql - 数据库建字段,默认值空和empty string有什么区别 1105. 怎么学好php6. mybatis - Java关于Mysql的随机id生成7. javascript - echart+百度地图8. 在MySQL数据库中查询表里的记录条数的代码怎么写?9. python - import里的dot是以哪个路径作为根目录的?10. python - 如何将文本文件的CR换行符换成LF换行符?