18910140161

css 边框上如何写入文字?

顺晟科技

2022-09-14 10:59:01

336

方法一:

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<body>标签中,输入html代码:。

<div style="margin-top: 30px;width: 200px;height:80px;border: 1px solid blue;">

<div style="position: absolute;left: 30px;top: 15px;">文字</div>

</div>

3、浏览器运行index.html页面,此时实现了边框角落开口显示文字。

方法二:

这个可以通过相对定位使某元素恰好处在div的边框上的方式来实现

1 position:relative;

下面举例说明

  1. 创建Html元素

    1 2 3 4 <div><spanclass="title">我是边框上的文字</span><span>我是边框内的文字</span></div>
  2. 设置css样式

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 div{width:200px;height:100px;padding:5px30px;margin:50px;border:4pxsolid#ebcbbe;}span.title{display:block;width:150px;height:30px;position:relative;top:-15px;text-align:center;background:white;}
  3. 观察显示效果

方法三:

<fieldset>
<legend>文字内容</legend>
<p>kkkk</p>
</fieldset>
这样就行

我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航