如何用HTML和＆amp ;;实现这些风格（在下面的图片中） CSS

Question

一个边框外面的区域，顶部有一个带有自己边框的标题。里面的内容并不重要。

这个案子：

谢谢！我真的不知道如何描述这些风格。

Answer 1

即使内部内容不是图像，在这两种情况下都可以使用<figure>和<figcaption>，例如

  

Codepen demo

<强>标记

<figure aria-labelledby="figure-1-1" class="f1">
   <figcaption id="figure-1-1">Title of the figure</figcaption>  
   ...
</figure>

<figure aria-labelledby="figure-1-2" class="f2">
   <figcaption id="figure-1-2">Title of the figure</figcaption>  
   ...
</figure>

<强> CSS

.f1, .f2 {
   border: 1px #9bc solid;
   position: relative;
   border-radius: 5px;
   min-height: 100px;
}

.f1 figcaption {
   position: absolute;
   top: 0;
   padding: .25em 1em;
   transform: translateY(-50%);
   left: 30px;
   border: inherit;
   border-radius: inherit;
   background: #fff;
}

.f2 figcaption {
   padding: .25em 1em;
   background: #9bc;
}

最终结果

进一步阅读：

• https://developer.paciellogroup.com/blog/2011/08/html5-accessibility-chops-the-figure-and-figcaption-elements/
• https://dequeuniversity.com/presentations/html5-nfb/figure-figcaption

Answer 2

对于第一个元素，一个解决方案是使用绝对位置，如此

.pink-element {
  background-color: #fffdfe;
  border: 2px solid #ff5ddc;
  margin-top: 15px;
  padding: 5px 15px 10px ;
  display: block;
  position: relative;
  border-radius: 5px
}

.pink-element--title {
  background-color: #fffdfe;
  border: 1px solid #ff5ddc;
  display: inline-block;
  padding: 5px;
  top: -12px;
  margin: 0;
  position: absolute;
  border-radius: 5px
}

<div class="pink-element">
  <p class="pink-element--title">
    Title Content
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla interdum magna ut pharetra hendrerit. Praesent sed odio nisl. Proin luctus, odio id pretium porta, metus arcu feugiat sem, a cursus purus ipsum rutrum mauris. Nunc elementum arcu ex, sit amet placerat nibh scelerisque in. Nulla at mattis arcu.</p>
 </div>

至于你的第二个元素，试试这个：

.grey-element {
  border: 2px solid #4d4d4d;
  margin-top: 15px;
  padding: 10px 15px;
  display: block;
  position: relative;
  border-radius: 5px
}

.grey-element--title {
  background-color: #4d4d4d;
  display: block;
  margin: -10px -15px;
  padding: 5px 15px;
  color: white
}

<div class="grey-element">
  <p class="grey-element--title">
    Title Content
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla interdum magna ut pharetra hendrerit. Praesent sed odio nisl. Proin luctus, odio id pretium porta, metus arcu feugiat sem, a cursus purus ipsum rutrum mauris. Nunc elementum arcu ex, sit amet placerat nibh scelerisque in. Nulla at mattis arcu.</p>
</div>