如何用元素覆盖一块边框？

Question

在此示例中,div的边框顶部有一个数字.为了说清楚,我希望用数字覆盖哪个边界部分,我也给了这个数字的边界.当然,我们可以给出数字的背景颜色,但是身体的背景图像被隐藏了.我们怎样才能隐藏数字透明度的边界？

HTML:

<div class="reg-step first-step">
   <span class="step-number">1</span>
   <img src="" alt="Register">
   <h1>Register</h1>
   <div class="steps-separator"></div>
   <p>Lorem ipsum dolor sit amer, consetetur sed iam nonumy eirmod tempor invidunt ut labore et dolore magna aliquayam erat, sed diam vo</p>
</div>

CSS:

body{ 
  background: blue;
  padding-top: 30px;
  background-image: url('https://pbs.twimg.com/profile_images/993504415/css_400x400.png')
}
.reg-step {
    width: 240px;
    height: 325px;
    border: 3px solid white;
    color: white;
    position: relative;
    text-align: center;
    padding: 0px 7px;
}
.reg-step h1 {
    font-size: 14px;
    text-transform: uppercase;
}
.reg-step p {
    font-size: 11px;
}
.reg-step img {
    display: block;
    margin: 10px auto 20px;
}
.reg-step .step-number {
    font-size: 40px;
    margin: 0 auto;
    display: inline-block;
    position: relative;
    top: -23px;
    width: 50px;
    border: 1px solid black;
    background-color: blue;
}
.reg-step .steps-separator {
    width: 90%;
    margin: 20px auto;
    height: 1px;
    background-color: white;
    padding: 0px 7px;
}

期望的结果如下所示:

Answer 1

您可以使用

<fieldset>

为了那个原因.

检查小提琴 https://jsfiddle.net/sepyzund/

HTML:

<fieldset class="reg-step first-step">
    <legend class="step-number">1</legend>
    <img src="" alt="Register">
    <h1>Register</h1>
    <div class="steps-separator"></div>
    <p>Lorem ipsum dolor sit amer, consetetur sed iam nonumy eirmod tempor invidunt ut labore et dolore magna aliquayam erat, sed diam vo</p>
</fieldset>

CSS:

body{ 
  background: blue;
  padding-top: 30px;
  background-image: url('https://pbs.twimg.com/profile_images/993504415/css_400x400.png')
}
.reg-step {
    width: 240px;
    height: 325px;
    border: 3px solid white;
    color: white;
    position: relative;
    text-align: center;
    padding: 0px 7px;
}
.reg-step h1 {
    font-size: 14px;
    text-transform: uppercase;
}
.reg-step p {
    font-size: 11px;
}
.reg-step img {
    display: block;
    margin: 10px auto 20px;
}
.reg-step .step-number {
    font-size: 40px;
    display: block;
    margin: 0 auto;
    width: 50px;
    border: 1px solid black;
}
.reg-step .steps-separator {
    width: 90%;
    margin: 20px auto;
    height: 1px;
        background-color: white;
    padding: 0px 7px;
}