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

Question

In this example，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;
}

Answer 2

如果你想要颜色透明，可以写成color: rgba(255, 255, 255, 0.5); 这里最后一个参数alpha就是你的透明度级别。您可以在 0 和 1 之间设置透明度。

Answer 3

我想到的第一个想法。使用像.reg-step:after 这样的伪元素作为底部边框，使用.reg-step 中的border-image 作为棘手的顶部（以及左右边框）。检查这个：

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;
    color: white;
    position: relative;
    text-align: center;
    padding: 0px 7px;
  
    border: 3px solid;
    border-image:   linear-gradient(to right, white 40%, transparent 40%,  transparent 60%, white 60%) 1;
}
.reg-step:after {
  content: " ";
  position:absolute;
  top:0px; left:0px;
  width:100%;
  height:100%;
  border-bottom: 3px solid white;
}
.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;
    display: inline-block;
    position: relative;
    top: -23px;
    width: 50px;
    border: 1px solid black;
}
.reg-step .steps-separator {
    width: 90%;
    margin: 20px auto;
    height: 1px;
    background-color: white;
    padding: 0px 7px;
}

<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>