테두리가있는 요소를 덮는 방법은 무엇입니까?

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);로 쓸 수 있습니다 마지막 매개 변수 알파이 귀하의 투명성 수준입니다. 과 사이에서 투명도를 설정할 수 있습니다.

Answer 3

내 마음에 온 첫 번째 아이디어. 아래쪽 테두리에는 .reg-step:after과 같은 가짜 요소를 사용하고, 까다로운 윗면에는 좌우 대칭뿐만 아니라 border-image을 .reg-step에 사용합니다. 이 옵션을 선택합니다 :

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>