Question

我想代表下面的图像，如何使用CSS和HTML做到这一点？ Custom Text Representation Image

注意：这不是文本输入字段。我只想显示文字。

Answer 1

请尝试以下代码。

<style>
.text-content{
position: relative;
border: 5px solid;
border-radius: 20px;
padding: 20px 0;
}
.text-content span{
position: absolute;
background: #fff;
left: 25px;
top: -18px;
padding: 0 10px;
font-size: 22px;
}
</style>

<h1 class="text-content">
  <span>TV NAME</span>
   ANDRIOD TV ROOM 1
</h1>

Answer 2

您可以使用HTML fieldset元素：

<fieldset>
  <legend>TV NAME</legend>
  ANDRIOD TV ROOM 1
 </fieldset>

Answer 3

也试试这个。我认为这对您来说很完美。

fieldset {
  width: 500px;
  border-radius: 15px;
  border: 5px solid #000000;
}
legend {
  font-size: 18px;
  font-weight: bold;
  color: #000000;
}
span {
  display: block;
  text-align: center;
  padding: 20px;
  font-size: 22px;
  font-weight: bold;
  color: #000000;
}

<fieldset>
  <legend>TV NAME</legend>
  <span>ANDRIOD TV ROOM 1</span>
 </fieldset>

在CSS中创建自定义文本表示

3 个答案: