<分区>
html - 如何使边框在一部分透明？
我有这个代码:https://codepen.io/aceraven777/pen/dyPGBeX
HTML:
<html>
<body>
<div class="box">
<div class="title-container">
<h1>title</h1>
</div>
<p>this is the description</p>
</div>
</body>
</html>
CSS:
body {
background: url('https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg');
background-size: cover;
padding-top: 30px;
}
.box {
border: 2px solid white;
width: 100px;
margin: auto;
padding: 30px;
position: relative;
}
.box .title-container {
position: absolute;
top: -22px;
left: 0;
width: 100%;
text-align: center;
}
.box .title-container h1 {
background-color: transparent;
margin: 0;
padding: 3px 10px;
display: inline;
}
这是 HTML 的输出:
请记住，这里我使用的是背景图片，而不是纯色背景。
在标题部分，我希望边框不撞到标题，我希望边框对那部分是透明的，如何实现？
最佳答案
您需要的是 HTML fieldset .
<fieldset>
<legend style="text-align: center;">Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>关于html - 如何使边框在一部分透明？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59263424/