如何使用css绘制一个框周围的边框的一半

Question

我有一个设计，我必须在文本周围绘制一半边框。我用来隐藏框周围边框的一半方法迫使我使用绝对定位的子元素，该子元素离开相对定位的父元素的流。结果是，当文本的长度增加时，父框不会随着孩子一起增长而文本越过边界。我希望父母的身高增长以包围文本。

我应该怎么做才能实现所需的设计并让父母围绕子文本？

＆＃13;

＆＃13;

.mask-right-half {
  width: 70%;
  height: 101%;
  top: -1px;
  left: -1px;
  position: absolute;
  background-color: white;
}

.black-border {
  position: relative;
  border: 1px solid #999;
  min-height: 250px;
  max-height: 350px;
  margin: 20px;
}

.text {
  position: absolute;
  padding: 30px 20px;
  z-index: 999;
}

＆＃13;

<div class='black-border'>
  <div class='mask-right-half'></div>
  <div class='text'>
    <p>
      This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
      testing text.This testing text. This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
      testing text.This testing text.This testing text.This testing text This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
      testing text.This testing text.This testing text.This testing text.This testing text.This testin
    </p>

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

View on JSFiddle

Answer 1

只需将linear-gradient视为border-image，您就可以用更少的代码获得所需内容：

p {
 padding:20px;
 border:2px solid;
 border-image:linear-gradient(to right,transparent 50%,#000 50%) 20;
}

<p>
  This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.
</p>
<p>
  This testing text
</p>
<p>
   This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text. This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.
</p>

这是伪元素的另一个想法：

p {
 padding:20px;
 position:relative;
}
p:after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:50%;
  border:2px solid;
  border-left:none;
}

<p>
  This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.
</p>
<p>
  This testing text
</p>
<p>
   This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text. This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.
</p>

使用线性渐变作为背景的另一种方法（如果您想单独管理边框，则非常有用）

p {
 padding:20px;
 background:
 linear-gradient(to right,#000,#000) 100% 0/60% 2px no-repeat,
 linear-gradient(to right,#000,#000) 100% 100%/50% 2px no-repeat,
 linear-gradient(to right,#000,#000) 100% 0/2px 100% no-repeat;
}

<p>
  This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.
</p>
<p>
  This testing text
</p>
<p>
   This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text. This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.
</p>

Answer 2

似乎.text元素不需要绝对定位。

.mask-right-half {
  width: 70%;
  height: 100%;
  left:-1px;
  top:-1px;
  padding:0 0 2px;
  position: absolute;
  background-color: white;
 }

.black-border {
  position: relative;
  border: 1px solid #999;
  min-height: 250px;
  margin: 20px;
}

.text {
  position: relative;
  padding: 30px 20px;
  z-index: 999;
}

<div class='black-border'>
  <div class='mask-right-half'></div>
  <div class='text'>
    <p>
      This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
      testing text.This testing text. This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
      testing text.This testing text.This testing text.This testing text lkjlkjlkjlkjklkljlkjlkj;l kjl lkj lkj lkjk;ljl j;lj;lkj ;lkj lkjlkj ;lkj;lkj;lj ;lj ;lj;l
    </p>
    <p>
      This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
      testing text.This testing text. This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
      testing text.This testing text.This testing text.This testing text lkjlkjlkjlkjklkljlkjlkj;l kjl lkj lkj lkjk;ljl j;lj;lkj ;lkj lkjlkj ;lkj;lkj;lj ;lj ;lj;l
    </p>
    <p>
      This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
      testing text.This testing text. This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
      testing text.This testing text.This testing text.This testing text lkjlkjlkjlkjklkljlkjlkj;l kjl lkj lkj lkjk;ljl j;lj;lkj ;lkj lkjlkj ;lkj;lkj;lj ;lj ;lj;l
    </p>
  </div>
</div>

修改

为简化标记，我甚至建议使用pseudo-element作为边框掩码：

.black-border:after {
  content: "";
  position: absolute;
  width: 70%;
  height: 100%;
  left: -1px;
  top: -1px;
  padding: 0 0 2px;
  background-color: white;
  z-index: -1;
}

.black-border {
  position: relative;
  border: 1px solid #999;
  margin: 2em;
  padding: 1.5em;
  z-index: 1;
}

<div class='black-border'>
  <p>
    This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.
  </p>
</div>

<div class='black-border'>
  <p>
    This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
    testing text.This testing text. This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
    testing text.This testing text.This testing text.This testing text lkjlkjlkjlkjklkljlkjlkj;l kjl lkj lkj lkjk;ljl j;lj;lkj ;lkj lkjlkj ;lkj;lkj;lj ;lj ;lj;l
  </p>
</div>

<div class='black-border'>
  <p>
    This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
    testing text.This testing text. This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
    testing text.This testing text.This testing text.This testing text lkjlkjlkjlkjklkljlkjlkj;l kjl lkj lkj lkjk;ljl j;lj;lkj ;lkj lkjlkj ;lkj;lkj;lj ;lj ;lj;l
  </p>
  <p>
    This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
    testing text.This testing text. This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
    testing text.This testing text.This testing text.This testing text lkjlkjlkjlkjklkljlkjlkj;l kjl lkj lkj lkjk;ljl j;lj;lkj ;lkj lkjlkj ;lkj;lkj;lj ;lj ;lj;l
  </p>
  <p>
    This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
    testing text.This testing text. This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
    testing text.This testing text.This testing text.This testing text lkjlkjlkjlkjklkljlkjlkj;l kjl lkj lkj lkjk;ljl j;lj;lkj ;lkj lkjlkj ;lkj;lkj;lj ;lj ;lj;l
  </p>
</div>