在css的框中打文字,css 边框上如何写入文字？

方法一：

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

2、在index.html中的

标签中，输入html代码：。

文字

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

方法二：

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

1

position:relative;

下面举例说明

1

2

3

4

我是边框上的文字

我是边框内的文字

设置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;

}

观察显示效果

方法三：

文字内容

kkkk

这样就行

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

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

理解CSS边框border

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

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

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

CSS 边框 阴影 效果

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

CSS 边框

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

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

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

CSS 边框(border)实例

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

CSS 边框图像

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

CSS边框及常用样式

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

&l ...

随机推荐

Delphi- ini文件的读写操作

一.读INI文件示例 procedure TForm1.FormCreate(Sender: TObject); Var MyIni :Tinifile; glAppPath :string; beg ...

poj 1061青蛙的约会

青蛙的约会 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 90083   Accepted: 16257 Descripti ...

HUST 1351 Group

(莫名其妙的被一个叫布布扣的网站收录了......什么鬼) 简单DP.dp[i][j]表示把前i个数字分成j段的最优解, 递推式很容易写: (其中sum[]是前缀和:p <= i - L,并且前 ...

linux命令学习7-jstat命令

最近维护的项目使用的是java开发的,所以对于jvm虚拟机相关的操作还是必须要了解的,就先从最基本的jstat来学习起来. 首先需要会的就是full gc的查看; 下面就从网上收集了一些工具介绍, 慢 ...

自学Python4&period;1-文件操作

文件操作 操作文件时,一般需要经历如下步骤: 打开文件 操作文件 关闭文件(非必须) 一.打开文件 open('文件路径', '模式')      打开文件时,需要指定文件路径和以何等方式打开文件,打 ...

C&num; 一个特别不错的http请求类

using System; using System.Collections; using System.Collections.Generic; using System.Collections.S ...

ConcurrentHashMap源码解析(1)

此文已由作者赵计刚授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 注:在看这篇文章之前,如果对HashMap的层不清楚的话,建议先去看看HashMap源码解析. http:/ ...

python 流程控制(while)

1,while基本语法 2,while else语句 1,while基本语法 n = 1 while n<10: print n n += 1 2,while else语句 n =10 whil ...

Android tips(八)--&gt&semi;Android Studio打包apk，aar，jar包

文本我们将讲解android studio打包apk,aar,jar包的相关知识.apk包就是android系统的安装包,这里没什么好说的,aar包是android中独有的类库包,而jar包是java ...

Oracle连接步骤

JDBC实现数据所有的操作: 数据库连接需要的步骤 1.数据库的驱动程序:oracle.jdbc.driver.OracleDriver; 2.连接地址:jdbc:oracle:thin:@主机地址: ...