方法一：

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>
        <span class="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:5px 30px;
        margin:50px;
        border:4px solid #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>
这样就行

css 边框上如何写入文字？的更多相关文章

  1. 第 17 章 CSS 边框与背景[上]

    学习要点: 1.声明边框 2.边框样式 3.圆角边框 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一．声明边框 边框的声明有 ...

  2. 理解CSS边框border

    前面的话   边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式   边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...

  3. 第 17 章 CSS 边框与背景[下]

    学习要点: 1.设置背景 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一．设置背景 盒模型的尺寸可以通过两种方式实现可见性, ...

  4. CSS 边框 阴影 效果

    CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...

  5. CSS 边框

    CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色. 边框样式 边框样式属性指定要显示什么样的边界.  border-style属性用来定义边框的样式 border-style 值: ...

  6. 第七十四节，css边框与背景

    css边框与背景 学习要点: 1.声明边框 2.边框样式 3.圆角边框  本章主要探讨HTML5中CSS边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 声明边框 边框的声明有三个属性设 ...

  7. CSS 边框(border)实例

    CSS 边框(border)实例:元素的边框 (border) 是围绕元素内容和内边距的一条或多条线. CSS border 属性允许你规定元素边框的样式.宽度和颜色. CSS 边框属性属性 描述bo ...

  8. CSS 边框图像

    border-image border-image 可以将图像应用到盒子的边框上. border-image 属性需要3个值同时存在: URL 图片的地址 切割图片的位,4个边需要写4个值 如何处理边 ...

  9. CSS边框及常用样式

    一.CSS设置样式 1.1 边框border 作用:设置标签周围的边框,方法  board:宽度 样式 颜色,一般情况下样式使用 solid实体的,和dotted虚线的 <head> &l ...

随机推荐

  1. 十、collection的作用+变量

    一.collection作用?容器 组织业务逻辑 导入导出 其他功能,比如监控和mock server 二.为什么要使用变量 假设我们需要测试n个api,这些api的domain都是相同的,比如 ap ...

  2. matplotlib 常用操作

    标准的Python中用列表(list)保存一组值,可以当作数组使用.但由于列表的元素可以是任何对象,因此列表中保存的是对象的指针.这样一来,为了保存一个简单的列表[1,2,3],就需 要有三个指针和三 ...

  3. java连接数据库失败：java.sql.SQLException: Access denied for user 'root'@'localhost' (using password: YES)

    说一下我的情况: 在测试环境中运行没有任何问题,但是导出war包之后,就将war包上传到线上服务器的webapps目录下,然后启动Tomcat,等待Tomcat将上传的war包解压(此时Tomcat没 ...

  4. SqlServer触发器常用语法AFTER、INSTEAD OF及其详解

    先创建一个简单的触发器 CREATE TRIGGER trigger_name ON table_name [WITH ENCRYPTION] FOR | AFTER | INSTEAD OF [DE ...

  5. filebeat输出到kafka

    # cat filebeat.yml filebeat.inputs: - type: log enabled: true tail_files: true paths: - /data/www.ex ...

  6. 阿里nacos k8s部署

    阿里nacos k8s部署 [root@master1 nacos]# cat nacos-quick-start.yaml --- apiVersion: v1 kind: Service meta ...

  7. Python机器学习基础教程-第2章-监督学习之K近邻

    前言 本系列教程基本就是摘抄<Python机器学习基础教程>中的例子内容. 为了便于跟踪和学习,本系列教程在Github上提供了jupyter notebook 版本: Github仓库: ...

  8. 【工具】java发送验证码邮件

    文章目录 前言 配置邮箱服务器 代码实现 发送随机验证码与验证 后记 前言 要实现 可以设置格式,附件,抄送等功能,就跟真人操控邮箱发送邮件一样的功能,或许比较难,博主没研究,博主暂时没用到那些功能, ...

  9. Python中遍历整个列表及注意点（参考书籍Python编程从入门到实践）

    1. 利用for循环遍历整个列表 magicians = ['alice', 'dsvid', 'carolina'] # 遍历整个列表 for magician in magicians: prin ...

  10. ~json库的使用

    一.json简介 json全称"JavaScript Object Notation"(JavaScript对象表示法)它是一种基于文本,独立于语言的轻量级数据交换格式.易于让人阅 ...