HR实现虚线效果

最新推荐文章于 2023-07-20 21:49:15 发布

yeyu712

最新推荐文章于 2023-07-20 21:49:15 发布

阅读量1.1w

点赞数 1

文章标签： border css

本文介绍了三种使用HTML和CSS实现HR虚线效果的方法。方法1是在<head>中预定义CSS样式，通过设置border-style属性为dotted来创建虚线。方法2直接在<hr>标签中定义样式。方法3尝试了另一种简化方式，但作者未能成功。

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

以HR实现虚线效果的代码：

方法1：
在<head>中预先定义好 CSS：
<STYLE type=text/css>
.dotline {
BORDER-BOTTOM-STYLE: dotted; BORDER-LEFT-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted
}
</STYLE>
然后修改水平线的代码为：<hr class=dotline color=#111111 size=1>

方法2：
　　直接在<hr>中使用如下代码：（本人使用此代码实现）

<hr style="BORDER-BOTTOM-STYLE: dotted; BORDER-LEFT-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted" color=#111111 size=1>

方法3：
　　更为简单的方法，使用如下代码（不知哪的问题，此代码在本人机器上没有效果，大家可以试一下）
<hr style="border:1px dashed; height:1px" color="#DDDDDD">

Trackback: http://tb.blog.youkuaiyun.com/TrackBack.aspx?PostId=1429861