方法一：

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. 【转】Python读取PDF文档，输出内容

    Python3读取pdf文档,输出内容(txt) from urllib.request import urlopen from pdfminer.pdfinterp import PDFResour ...

  2. Python记录-基础语法入门

    # -*- coding: utf-8 -*- #数字计算 a=1 b=2 print(a+b) print(a*b) print((a+b)/1) #浮点数 print((a+b)//2) ##保留 ...

  3. 转 Java连接Oracle数据库的简单示例

    https://www.cnblogs.com/joyny/p/11176643.html https://community.oracle.com/thread/4096458 import jav ...

  4. Linux的桌面虚拟化技术KVM（二）——远程桌面管理

    Linux的桌面虚拟化技术KVM(一)——新建KVM虚拟机 远程桌面管理,指的是远程图形界面管理,所以要保证物理机要有图形化界面. (1).VNC管理 安装VNC-server服务,并进行配置 [ro ...

  5. Python使用numpy实现BP神经网络

    Python使用numpy实现BP神经网络 本文完全利用numpy实现一个简单的BP神经网络,由于是做regression而不是classification,因此在这里输出层选取的激励函数就是f(x) ...

  6. css样式圆角和一定的透明度

    css样式里可以用border-radius把div或图片变成带有一定圆角的,如果是div本身是正方形,设置圆角度是百分之五十,就是圆形. border-radius:值可以是具体的px数值,也可以是 ...

  7. Data - 数据思维 - 中篇

    6 - 模型与框架 利用现有的成熟的理论.模型与框架,结合实际业务情况,搭建分析框架,尽量确保数据分析维度的完整性,结果的有效性及正确性. 营销理论模型:4P.用户使用行为.STP理论.SWOT等. ...

  8. git 版本控制中回溯到某个历史版本

    1.git log 查看之前的版本号 2. git reset --hard 版本号 3.git push -f -u origin 分支 恢复上一个版本是: git reset --hard HEA ...

  9. Appium移动自动化测试-----（六）3.AppiumDesktop功能描述

    一般功能 这些能力跨越多个驱动因素. 能力 描述 值 automationName 使用哪个自动化引擎 Appium(默认)或Selendroid或者UiAutomator2或者Espresso对于A ...

  10. 通过调用Windows本地RPC服务器bypass UAC

    备战一个月比赛,导致近期都没啥时间更新博客,正好今天看到一篇通过调用本地RPC服务的文章,觉得非常有意思,就拿来充充博客. 在1.0版本的APPINFO.DLL中的RPC服务调用接口ID为:201ef ...