Öğenin üzerindeki sınır parçasının üzerine nasıl örülür?

Question

In this example, div sınırının üstünde asılı bir sayı var. Açıklığa kavuşturmak için, sınırın hangi bölümünü saymak istediğimi, sayıya da sınır tanıttım. Elbette, numara için arka plan rengi verebilirdik, ancak vücudun arka plan resmi gizleniyor. Sınır parçasını saydamlıkla nasıl gizleyebiliriz?

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

İstenilen sonuç şu şekildedir: Eğer renk şeffaflık istiyorsanız

Answer 1

Bunun için

<fieldset> 

kullanabilirsiniz.

onay Fiddlehttps://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

, sen burada color: rgba(255, 255, 255, 0.5); olarak yazabilir son parametre alpha şeffaflık düzeyinizdir. Saydamlığı ve arasında ayarlayabilirsiniz.

Answer 3

aklıma gelen ilk fikir. Alt kenarlık için .reg-step:after ve .reg-step numaralı border-image gibi zorlu üst için (soldaki ve sağdakiler gibi) bir sözdizimi kullanın. Bu kontrol edin:

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>