如何让 h1 高于边界

Question

我正在为 HTML 编写一个免费的 PSD，一切都很好，除了一件事 - 我不知道如何获得这样的东西：

Slice from PSD

如何让 h1 高于边框，以便它可以覆盖边框的一部分？可以用纯 CSS 来完成还是我用 JS？

Answer 1

body{
  background:white;
}
fieldset {
      display: block;
      margin: 20px 1%;
      margin-bottom: 20px;
      padding: 0 auto;
      padding: 15px 0;
      border: 0;
      border: 1px solid #000;
      width: 98%;
      background:white;
      color:black;
}

fieldset:last-of-type {
      margin-bottom: 0px;
}

legend {
     display: table; 
     min-width: 0px;
     max-width: 70%;
     position: relative;
     margin: auto;
     padding: 5px 20px;
     color: #000;
     font-size: 20px;
     text-align: center;
}

fieldset div{
  margin:0 auto;
  text-align:center;
  width:50%;
  //border:thin red solid;
  font-size:12px;
}

    <fieldset>
        <legend align="center" >About Us</legend>
          <div>
            When You work with us... content
          </div>
    </fieldset>

你在找这个吗？

这里是JSFiddle

希望对您有所帮助。

Answer 2

legend {
  padding: 1em;
  margin-left: calc(50% - 3em);
}

<fieldset>
  <legend>Test</legend>
</fieldset>

Answer 3

您可能正在寻找这个

<div>
   <h1>Some Text</h1>
    <p>Some text also</p>
</div>

风格是

div{
    border:1px solid #000;
    text-align:center;  
}
div h1{
    background:#fff;
    margin-top:-20px;
    width:200px;
    margin-left:auto;
    margin-right:auto;
 }

CSS在link

中给出

jsfiddle

Answer 4

也许使用一些常规标签（不反对语义）和 flex 你可以做到：

div {
  magin: 2em;
  margin-top: 2em;
  border: solid;
  border-top: 0;
  padding: 1px;
  text-align: center;
}
h1 {
  margin-top: -0.6em;
  display: flex;
  align-items: center;
}
h1:before,
h1:after {
  content: '';
  flex: 1;
  border-bottom: solid;
  margin: auto -3px auto 2em;
}
h1:before {
  margin: auto 2em auto -3px;
}
p {
  padding: 1em;
}
/* do i see through ? */

body {
  background:linear-gradient(to bottom left, gray,yellow,purple,gold,pink,tomato);

<div>
  <h1>HTML Ipsum Presents</h1>

  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
    placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
    tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo.</p>

</div>

如何让 h1 高于边界

How do I get h1 above border

html

css

psd