边上半长

Question

我附上了一张图片。我想创建类似的边框。但我无法创建顶部边框半部

这是我的CSS

border-left:1px solid;
border-top:1px solid;
border-bottom:1px solid;
border-right:1px solid;

如何实际限制顶部边框？

Answer 1

您可以滥用fieldset和legend：

fieldset {
  height: 100px;
  width: 80%;
  margin: 1em auto;
}
legend {
  padding: 1em;
}

<fieldset>
  <legend>Icon here</legend>
</fieldset>

注意：这是不语义，因为这不是fieldset或legend的预期用途。

MDN Reference

  

HTML元素用于对Web表单中的多个控件和标签（）进行分组。

Answer 2

使用fieldset和legend：

＆＃13;

＆＃13;

body {
  background-color: #4a494e;
}

.box {
  border: 5px #b79a60 solid;
  color: #b79a60;
}

.box-label {
  color: #b79a60;
  padding: 5px 10px;
}

＆＃13;

<fieldset class="box">
  <legend class="box-label">Insert Clock Image Here</legend>
  <h1>Hours</h1>
  <p>Show gallery opens daily</p>
  <p>11.00am - 6.00pm</p>
</fieldset>

＆＃13;

＆＃13;

＆＃13;