使 child 元素的边框与 parent 的边框重叠的更好方法

Question

在 CSS:

的帮助下，我正在做一个需要这种效果的项目

下面是我想要实现的目标的描述：

parent 元素（title）在底部有一些内边距和 2px 边框。它还有一个 child (title-inner)，它也有一些填充和 2px 边框，但颜色不同，并且它与 parent 的边框重叠，即 title .

我正在使用这个标记结构：

<div class="title">
    <div class="title-inner">Widget title</div>
</div>

我知道可以通过对这两个元素的填充和边距属性进行一些调整来实现，但是 CSS 我到目前为止所写的内容在移动设备上或浏览器调整大小时（有一看this fiddle).

在CSS中有没有更好的方法来实现这种效果？有什么想法吗？

Answer 1

与其给子元素和父元素都提供padding，不如给子元素提供padding，然后添加一个负值margin，使边框相互重叠。

body {
    background: black;
    color: #ddd;
    font-family: Helvetica, sans-serif;
    margin: 2em;
}

.title {
    border-bottom: 2px solid;
}

.title-inner {
    display: inline-block;
    vertical-align: bottom;
    padding-bottom: 16px;
    margin-bottom: -2px;
    border-bottom: 2px solid #E64998;
}

<div class="title">
    <span class="title-inner">Lorem Ipsum</span>
</div>

Answer 2

另一种选择是对子元素使用绝对定位：

.title {
   border-bottom: 2px solid;
   position: relative;
   padding-bottom:20px;
   height: 20px;
}

.title-inner {
   display: inline-block;
   position: absolute;
   width: 50%;
   height: 100%;
   border-bottom: 2px solid #E64998;
 }

请注意，我在您的图片示例中添加了 50% 的宽度。

http://jsfiddle.net/v1ut1pyv/5/

Answer 3

我认为最酷的选择是使用背景、div 和宽度。

Animation Demo

使用 div 代替边框可以让您更好地控制元素。

<div class="title">
    <div class="title-inner">Lorem Ipsum</div>
    <div id='line'>
        <div id='load'></div>
    </div>
</div>

使用 div 后，设置 css

body {
    background: black;
    color: #ddd;
    font-family: Helvetica, sans-serif;
    margin: 2em;
}
.title-inner {
    padding: 17px;
}
#line {
    background-color:purple;
    height:2px;
    width:100%;
}
#load {
    background-color:yellow;
    height:100%;
    width:0%;
}

然后您可以使用 javascript 操作代码。

   function loop() {
        $('#load').animate({
            width: "50%"
        }, 1600);
        $('#load').promise().done(function () {
            $(this).width(0);
            loop();
        });

    }
loop();

使 child 元素的边框与 parent 的边框重叠的更好方法

Better way to make the child element's border to overlap with parent's

html

css

jquery

frontend