CSS边框 - 只是该行的一部分

Question

有没有办法如何使用css（理想）绘制元素边框但只是一部分线（在左右边框下方的图像中）？

Answer 1

是的，您可以像这样，甚至IE8都可以这样做：

＆＃13;

＆＃13;

div {
    position: relative;
    width: 100px;
    padding: 10px;
}
div:before {
    content: " ";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    border: 1px solid black;
    border-top-width: 0;
}

＆＃13;

<div>Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

请试试这个：

.box {
  position: relative;
  min-height: 100px;
  padding-bottom: 10px;
}
.box .text {
  margin: 10px;
}
.box .bordered {
  position: absolute;
  bottom: 0;
  height: 30%;
  border-right: 1px solid #000;
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
  width: 100%;
  z-index: 1000;
}

<div class="box">    
    <div class="text">Hell world!</div>
    <div class="bordered"></div>
</div>

在此处查看小提琴：https://jsfiddle.net/42zgo5aa/3/

Answer 3

这是我对John's answer的改进。

我只是摆弄负边距以使边框出现并稍稍包装容器。

＆＃13;

＆＃13;

.box {
  position: relative;
  min-height: 100px;
  padding: 0 15px;
  padding-bottom: 10px;
}
.box .bordered {
  position: absolute;
  height: 20px;
  border-right: 1px solid #000;
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
  width: 100%;
  margin: -10px;
  z-index: 1000;
}

＆＃13;

<div class="box">
  Hello world!
  <br/>You are beautiful!
  <div class="bordered"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

我确定在CSS 2.1中没有（常规）方法可以做到这一点，我也不知道CSS 3也支持这一点。您可以做一些技巧，比如在文本后面创建一个单独的元素，这个元素不太高，只有左，右和下边框。但当然，这不是人们真正想要的解决方案。