我有一个设计,我必须在文本周围绘制一半边框。我用来隐藏框周围一半边框的方法迫使我使用绝对定位的子元素,它脱离了相对定位的父元素的流。结果是,当文本的长度增加时,父框不会随子框一起增长,文本会越过边界。我希望 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>
最佳答案
只需将 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/