html水平分割线虚线代码,CSS分割线虚线代码

时间:2025-01-27 07:16:16

CSS分割线虚线代码

原创

My_King12010-08-15 16:09:35著作权

文章标签

文章分类

脚本语言

阅读数

1702

©著作权归作者所有:来自51CTO博客作者My_King1的原创作品,如需转载,请注明出处,否则将追究法律责任

https://blog./apprentice/1360689

实心的线条:


竖直线:


虚线:


size=1:

size=2:

size=3:

size=4:

size=5:

size=6:

size=7:

size=8:

size=9:

size=20:

双线:


size=1:

size=2:

size=3:

size=4:

size=5:

size=6:

size=7:

size=8:

size=9:

size=20:

立体感: 


size=20:

左边逐渐变透明:


右边逐渐变透明:


样式:

代码如下:



标签

最基本的:


其中 width 规定线条的长度,还可以是百分比;color 表示颜色,size 表示厚度;

align 规定线条位置,有left(左对齐)、right(右对齐)、center(中对齐);noshade 表示是否有立体效果。

两头渐变透明: (利用CSS滤镜处理)


右边渐变透明:


画虚线:


画双线:


立体效果:


纺棰形:


钢针效果:


也可以利用

或者利用CSS里的background属性,更方便控制划线效果,比如像一个一像素的点()

水平划线:

 

垂直划线:

 

当然还有其他很多方法,大家可以参考HTML及CSS相关资料

样式:

代码如下:


 一般很多朋友都是用长条行的图片来当分割线,而用图片的话要不就是要上传,要不就是要做链接,链接有时候还影响页面打开的速度,所以我给大家介绍几种用代码生成的分割线!

用简单的“hr”语句就能实现多样化的分割效果:

最基本的:


其中 width 规定线条的长度,还可以是百分比;color 表示颜色,size 表示厚度;

align 规定线条位置,有left、right、center;noshade 表示是否有立体效果。

两头渐变透明:


右边渐变透明:


画虚线:


画双线:


立体效果:


纺棰形:


钢针效果:


0收藏

评论