html - 如何使用CSS在盒子周围绘制一半边框

标签 html css

我有一个设计,我必须在文本周围绘制一半边框。我用来隐藏框周围一半边框的方法迫使我使用绝对定位的子元素,它脱离了相对定位的父元素的流。结果是,当文本的长度增加时,父框不会随子框一起增长,文本会越过边界。我希望 parent 的高度增长以围绕文本。

我应该怎么做才能达到预期的设计并使父文本包围子文本?

.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;
}
<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>

View on JSFiddle

最佳答案

只需将 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>

关于html - 如何使用CSS在盒子周围绘制一半边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48995775/

相关文章:

html - 无法将输入表单数据作为 Golang 中的变量

android - Chrome for Android 中的 CSS 问题

javascript - 如何向 Bootstrap Accordion 添加展开/折叠图标的切换?

html - 如何在 Bulma 模式页脚中的同一水平位置具有左对齐和右对齐的内容?

javascript - 当动态创建表单时,如何从 Meteor Event 中的 HTML 表单获取值?

php - 实现动态 CSS 和 SVG 值 (PHP) 的最佳方法是什么?

css - SVG 作为背景图像,跨浏览器兼容性

css - 样式不适用于 Firefox 和 IE 中的 SVG 元素

javascript - 动画中的不同步

javascript - 可同时拖动和点击