CSS修改過的框和文本

Question

CSS可以做這件事嗎？如果是的話，你怎麼稱呼它？謝謝。我是新的CSS

Answer 1

我不知道你的意思是什麼「這個」，但我想你的意思是這樣的：

div { 
 
    display: inline-block; 
 
    border: 1px solid #000; 
 
    padding: 5px; 
 
    margin-top: 1em; 
 
} 
 

 
span { 
 
    float: left; 
 
    background: #fff; 
 
    padding: 0 5px; 
 
    margin-top: -1em; 
 
}

<div> 
 
    <span>About us</span> 
 
</div>

Answer 2

你可以做到這一點HTML

<form> 
 
    <fieldset> 
 
    <legend>Personalia:</legend> 
 
    Name: <input type="text"><br> 
 
    Email: <input type="text"><br> 
 
    Date of birth: <input type="text"> 
 
    </fieldset> 
 
</form>

源鏈接：https://www.w3schools.com/tags/tag_fieldset.asp

Answer 3

.item{ 
 
     border:2px solid black; 
 
     border-top:0px; 
 
    
 
    } 
 
    h2 { 
 
     width: 100%; 
 
     text-align: center; 
 
     border-bottom: 2px solid #000; 
 
     line-height: 0.1em; 
 
     margin: 10px 0 20px; 
 
    } 
 
    
 
    h2 span { 
 
     background:#fff; 
 
     padding:0 10px; 
 
    }

<div class="item"> 
 
    <h2 class="left"><span>about us</span></h2> 
 
    </div>

Answer 4

我得到解決這個問題的position的幫助！

div { 
 
    position: relative; 
 
    width: 400px; 
 
    padding: 10px; 
 
    border: 1px solid; 
 
    border-radius: 5px; 
 
} 
 

 
span { 
 
    position: absolute; 
 
    top: -10px; 
 
    background-color: #FFF; 
 
    color: red; 
 
} 
 

 
input { 
 
    width: 100%; 
 
}

<div> 
 
    <span>Enter Name</span> 
 
    <input type="text"> 
 
</div>