html+css画虚线,实线

本文详细介绍了在HTML中如何添加不同样式的虚线边框,包括点线、虚线、实线、双线等,并解释了border属性的用法及各参数的含义。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

html中加入虚线

Posted on  2011-11-23 15:57  Trible.H 阅读( 11498) 评论( 0编辑  收藏
html里添加虚线
<hr style="border:1px dashed #000; height:1px">

<hr style="border:1px dotted #036" />

<hr style="border : 1px dashed blue;" />
( J; B8 E( E! w7 C
<hr style="border: 1px solid #ff0000"/>
8 }* {# h# f7 ]3 K1 c
<hr style="border:1px dashed #0000fff"/>
9 c% Y" k0 S& G N
1 H1 @5 {% u" v$ D
<hr style="border:3px dotted #000 "/>
3 Y N7 I+ {7 v2 _! T* E1 W
<hr style="border:2px double #e8e8e8"/>
9 ~+ k5 b6 Y* h* S 
border : border-width || border-style || border-color
取值:
该属性是复合属性。请参阅各参数对应的属性。
默认值为: medium none 。 border-color 的默认值将采用文本颜色。

说明:
设置对象的边框样式。
当你指定了边框颜色( border-color )和边框宽度( border-width )时,你必须同时指定边框样式( border-style ),否则边框不会被呈现。
如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
例如:设置 border : thin 等于设置 border : thin none ,而 border-color 的默认值将采用文本颜色。因此此前的任何 border-color 和 border-width 设置都会被清除。
在 IE5.5+ 中,边框属性可以直接应用于内联要素。而在此前的版本中,内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。
对应的脚本特性为 border 。

border-bottom-style版本:CSS2  兼容性:IE4+ NS6+ 继承性:无
语法:
border-bottom-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
取值:
none :  默认值。无边框。不受任何指定的 border-width 值影响
hidden :  隐藏边框。IE不支持
dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid :  实线边框
double :  双线边框。两条单线与其间隔的和等于指定的 border-width 值
groove :  根据 border-color 的值画3D凹槽
ridge :  根据 border-color 的值画菱形边框
inset :  根据 border-color 的值画3D凹边
outset :  根据 border-color 的值画3D凸边

说明:
设置对象下边框的样式。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
在 IE5.5+ 中,边框属性可以直接应用于内联要素。而在此前的版本中,内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。
如果 border-bottom-width 设置为 0 ,本属性将失去作用。
对应的脚本特性为 borderBottomStyle 。
### HTMLCSS 基础教程 #### HTML 文档结构 HTML文档遵循特定的结构来定义网页的内容。一个标准的HTML文件由多个标签组成,这些标签用于描述页面的不同部分[^1]。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>这是网页的标题</title> </head> <body> 这是网页的主体部分,即内容 </body> </html> ``` 上述代码展示了最简单的HTML文档框架。`<doctype>`声明位于文档顶部,告知浏览器该文档采用的是哪种版本的HTML;紧接着是根元素 `<html>` ,它包含了两个主要子元素——头部 (`<head>`) 和主体 (`<body>`) 。其中,`<meta>` 标签提供了元数据信息,而 `<title>` 则设定了显示于浏览器选项卡上的文字。 #### 使用 CSS 设置样式 为了使网页更加美观并增强用户体验,可以利用CSS(层叠样式表)为HTML元素添加视觉效果。例如设置边框属性时需要注意,按照CSS规范的规定,边框是在“元素的背景之上”绘制出来的,这意味着对于那些具有间隙特征的边框类型来说(比如点状或虚线),其间的空白处会显露出背后的背景颜色[^2]。 下面是一个简单例子展示如何通过内联方式给段落加上红色实线边框: ```html <p style="border: solid red;">这是一个带有红色边框的文字。</p> ``` 另外一种更推荐的做法是将所有的样式规则集中写在一个单独的`.css` 文件里,并通过链接的方式引入到HTML中去,这样不仅便于维护也提高了可读性和重用率。 #### 实际应用案例 这里给出一段完整的HTML+CSSL实例,创建了一个包含标题和段落的小型静态页面[^3]: ```html <html> <body> <h1>我的第一个标题</h1> <p>我的第一段文字。</p> </body> </html> ``` 此片段中的`<h1>`代表最高级别的标题,通常用来表示文章的主要主题;而`<p>`则是用来包裹普通正文的一对标记符。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值