边界包裹文本与休息

Question

我不确定解释此问题的最佳方法，但这张图片可能是最有帮助的。我可以使用CSS创建这样的边框，还是需要使用图像？

Answer 1

您可以使用<fieldset>元素

fieldset {
  border: 3px solid;
  text-align: center;
}

legend {
  text-align: center;
  padding: 0 20px;
}

<fieldset>
  <legend>This is a</legend>
  #test
</fieldset>

Answer 2

这个解决方案放置＆＃34;传奇＆＃34;在顶部边框的顶部，阻挡它的中间部分并给出你想要的效果。

＆＃13;

＆＃13;

df['Market Cap'] = df['Market Cap'].str.replace(',', '').astype(float)
df['Volume'] = df['Volume'].str.replace(',', '').astype(float)

＆＃13;

body {background:black;}
.top-border-break {padding:20px 0 0;}
.inner {border:5px solid red; padding:0 20px 20px; text-align:center;}
.legend {background:black; font-size:25px; line-height:30px; text-align:center; color:tan; display:inline-block; padding:0 80px; transform:translate(0, -15px);}
.text {font-size:45px; line-height:60px; color:red;}

＆＃13;

＆＃13;

＆＃13;