登录  /  注册
css - 有没有什么办法用背景色把部分border给遮挡呢？
伊谢尔伦
伊谢尔伦 2017-04-17 12:00:05
[CSS3讨论组]
0 4 784
举报

我要实现下图中的效果：排队人数后面没有灰色的线。由于项目是UI重构，所以得尽可能减少结构上的差异，我现在实际做出的效果是排队人数后面有父盒子的灰色border，请教大神们，有木有什么办法用子盒子的背景色覆盖父盒子的border。请赐教！

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回复(4)
ringa_lee
ringa_lee2017-04-17 12:02:05 4楼

可以使用定位，让子元素浮起来。假设父元素是100%宽度边框是黑色，可以将子元素设置为102%,将其背景色设置为red,从而让背景色可以将父盒子左右边框覆盖。
赞 +0
添加回复
巴扎黑
巴扎黑2017-04-17 12:02:05 3楼

可以用：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，效果如下：


这样也是可以的呢~不知道我理解你的意思理解的对不对...以上，酱紫！
赞 +0
添加回复
PHP中文网
PHP中文网2017-04-17 12:02:05 2楼

亲，是否考虑把border的框架去掉呢？
赞 +0
添加回复
高洛峰
高洛峰2017-04-17 12:02:05 1楼


如果这样子说，这样子不更快？？？
赞 +0
添加回复
专题推荐
更多>
热门话题
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部