css 边框上如何写入文字?
方法一:
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 ; |
下面举例说明
创建Html元素
1234<
div
>
<
span
class
=
"title"
>我是边框上的文字</
span
>
<
span
>我是边框内的文字</
span
>
</
div
>
设置css样式
12345678910111213141516div{
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
;
}
观察显示效果
方法三:
<fieldset>
<legend>文字内容</legend>
<p>kkkk</p>
</fieldset>
这样就行
css 边框上如何写入文字?的更多相关文章
- 第 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虚线的 <head> &l ...
随机推荐
- WebSocket接收音频,并推送到声卡上
使用信息 import com.fasterxml.jackson.databind.ObjectMapper; import com.google.common.collect.ImmutableM ...
- array_map
<?php //对数组中的每个元素做函数处理 $arr = array(,,,,,); function cheng($hah){ ; } var_dump(array_map('cheng', ...
- Python第一阶段04
1.文件操作: # 指明编码 f = open("sisi", encoding="utf-8") # 读 data = f.read() print(data ...
- idea的alt+enter可以从菜单点吗
在idea中,当java某个类的包没有引入的时候,可以通过alt+enter来实现包的引入,那么可以通过菜单按钮,或者右键的方式点出来吗? 我们知道eclipse如果某个类为止,放在这个报错的类上,e ...
- JS根据offsetHeight修改元素的高度
之前的博文: 测试了offsetHeight获取的是页面元素的高度,包裹该元素本身内容的高度,上下padding,上下border.这个获取的但是px,px是相对单位,受电脑分辨率的影响,用LODOP ...
- pv回收
学习cloudman中的k8s 152课,创建pod时,需要在k8s-host2 中挂着到在k8s-master 中/nfs中创建的挂载目录,结果提示没有/nfs/pv1 root@k8s-maste ...
- php 微服务
https://neatlifecoco.com/15618891575018.html https://juejin.im/post/5d3927816fb9a07ee27b58df https:/ ...
- [bzoj4345][POI2016]Korale_堆_贪心_线段树_dfs
bzoj4345 POI2016 Korale 题目链接:https://lydsy.com/JudgeOnline/problem.php?id=4345 数据范围:略. 题解: 由于$k$的范围问 ...
- Python数据挖掘之随机森林
主要是使用随机森林将four列缺失的数据补齐. # fit到RandomForestRegressor之中,n_estimators代表随机森林中的决策树数量 #n_jobs这个参数告诉引擎有多少处理 ...
- [转帖]大数据hadoop与spark的区别
大数据hadoop与spark的区别 https://www.cnblogs.com/adnb34g/p/9233906.html Posted on 2018-06-27 14:43 左手中倒影 阅 ...