CSS HTML 实现虚线横线分隔线

最新推荐文章于 2021-06-09 18:52:50 发布
原创 最新推荐文章于 2021-06-09 18:52:50 发布 · 2w 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #css #border #div

本文介绍了两种不同的方法来实现网页中水平分隔线（HR线）的绘制。第一种方法使用了HTML的hr标签，并设置了特定的样式属性；第二种方法则是通过div元素结合CSS边框属性来达到相同的效果。这两种方式各有特点，可以根据实际需求选择使用。

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

方法一：
<hr size="1" noshade="noshade" style="border:1px #cccccc dotted;">

方法二：
<div style="border-top:1px dashed #cccccc;height: 1px;overflow:hidden"></div>

HTML+CSS部分知识点整合（结合案例实际运用归纳）
m0_46799664的博客
09-11 636
HTML+CSS制作静态页面第一部分 基础知识HTML各个标签的分类以及用途行内元素丶块级元素以及行内块元素合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 第一部分 基础知识 HTML各个标签的分类以及用途 HTML的众多标签可以分为两大类
html设置分割线虚线,css border设置虚线样式
01-15
html设置分割线虚线,css border设置虚线样式
用CSS实现水平虚线的两种方法
xymyeah
06-03 2284
方法一：方法二：
html分割线
antiking的专栏
03-20 1万+
html 分割线(转载)                                        【分割线】一、基础代码：1、 2、align 线条位置（可选left、right、center）；width 线条长度；color 颜色；size 厚度 二、特效（效果并不是孤立的，可相互组合）1、两头渐变透明： 2、纺锤形： 
CSS分割线虚线代码
weixin_34273046的博客
08-15 1896
实心的线条:<HRalign=leftwidth=490color=#990099SIZE=3noShade>竖直线：<HRalign=centerwidth=1color=redsize=100>虚线：<hrsize=1style="color:blue;border-style:dotted;width:490"&gt...
css实现文字居中两边横线效果的示例代码
09-22
本文将详细介绍如何使用CSS实现一个特定的设计效果：在文字居中的同时，使文字两侧带有横线。这种效果常用于标题、标签或分割线的视觉表达，提升页面的视觉层次感和美观度。 首先，要实现文字居中且两侧带有横线的...
css画横线和竖线
最新发布
03-25
这种方式适用于快速创建标准样式的分隔线[^5]。 #### 竖线的实现方式 对于竖线来说，通常也是借助于 CSS 中的 `border-left` 或者 `border-right` 属性来进行构建。下面给出一个具体的实例说明如何操作： ```css ....
html实现一个横线
03-25
嗯，用户想用HTML实现一个横线。首先，我得回忆一下HTML中常用的水平线标签。记得以前学过标签，这是专门用来插入水平分隔线的。不过现在可能更推荐用CSS来做了，因为这样样式控制更灵活。 然后，我需要考虑用户的...
html中水平线css颜色
02-25
这段代码创建了一条宽度为2像素且颜色为红色的上边界作为新的水平分隔线[^3]。 #### 利用类选择器控制多个HR元素 如果页面中有多个地方需要用到相同样式的水平线，则可以考虑定义一个公共的CSS类供重复调用： ```...
html水平分割线虚线代码,CSS分割线虚线代码
weixin_42297347的博客
06-09 4956
CSS分割线虚线代码原创My_King12010-08-15 16:09:35著作权文章标签文章分类脚本语言阅读数1702©著作权归作者所有：来自51CTO博客作者My_King1的原创作品，如需转载，请注明出处，否则将追究法律责任https://blog.51cto.com/apprentice/1360689实心的线条:竖直线：虚线：size=1:size=2:size=3:size=4:si...
css划隔横线的两种方法
weixin_30457881的博客
11-28 567
css划隔横线的两种方法 方法一：用DIV，代码如下：（推荐此方法） <div style="width:800px;height:1px;margin:0px auto;padding:0px;overflow:hidden;"></div> 说明：上面代码中的红色部分overflow:hidden;很重要，如果不加这句的话，在IE6下高度将会被拉的很开。...
html设置分割线虚线,css border设置虚线样式？
weixin_32348697的博客
06-09 9032
在网页布局中，有时为了整体网页的美观，我们需要设置不同的边框样式。那么怎么设置边框的虚线样式？本篇文章就给大家介绍css设置边框虚线样式的两种方式。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。首先要知道在css中我们是使用border属性来设置边框的，它可以通过设置边框的宽度、颜色、圆角度、样式(实线、虚线、双线等等)。下面我们通过简单的代码示例来具体看看css的border边框...
HTML如何做出分割线效果
热门推荐
李谦的博客
12-17 3万+
HTML几种分割线效果
CSS实例之水平线变成虚线
axl19530209的专栏
01-13 3359
内容提要：CSS实例之水平线变成虚线，学习CSS实例之水平线变成虚线，如何用CSS把水平线变成虚线？     学习CSS实例之水平线变成虚线     如何用CSS把水平线变成虚线？     答案一：     案二： 辛勤网 『 网页设计 | DIV+CSS 』
html中画分割线的代码,各种分割线Html代码
weixin_33042645的博客
06-09 8987
各种分割线Html代码1、2、align=center width=300 color=#987cb9SIZE=1>align线条位置(可选left、right、center)；width线条长度；color颜色；size厚度二、特效(效果并不是孤立的，可相互组合)1、两头渐变透明：color=#987cb9 SIZE=3>2、纺锤形：color=#987cb9 SIZE=10>...
虚线分割加图片html,HTML 几种特别分割线特效
weixin_39806413的博客
06-07 578
一、基本线条二、特效(效果并不是孤立的，可相互组合)1、两头渐变透明：2、纺锤形：3、右边渐变透明：4、左边渐变透明：5、虚线：6、双线：7、立体效果：style="FILTER:progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)"width="80%" color=#987cb9 SI...
html水平线 虚线
vera_xue的专栏
02-21 3万+
＜html＞ ＜head＞＜title＞美丽的水平线＜/title＞＜/head＞ ＜body＞ ＜p＞一条没有阴影粗细为５像素，宽为整个文档一般的居中的水平线 ＜／p＞ ＜hr noshade size=5 align=center width=50%＞ ＜/body＞ ＜/html＞ 属性： size: 设置水平分隔线的高度，单位：像素默认值是2 width: 设置水平分隔
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值