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滤镜处理)
右边渐变透明:
画虚线:
画双线:
立体效果:
纺棰形:
钢针效果:
也可以利用
如
水平划线:
垂直划线:
当然还有其他很多方法,大家可以参考HTML及CSS相关资料
样式:
代码如下:
一般很多朋友都是用长条行的图片来当分割线,而用图片的话要不就是要上传,要不就是要做链接,链接有时候还影响页面打开的速度,所以我给大家介绍几种用代码生成的分割线!
用简单的“hr”语句就能实现多样化的分割效果:
最基本的:
其中 width 规定线条的长度,还可以是百分比;color 表示颜色,size 表示厚度;
align 规定线条位置,有left、right、center;noshade 表示是否有立体效果。
两头渐变透明:
右边渐变透明:
画虚线:
画双线:
立体效果:
纺棰形:
钢针效果:
赞
0收藏
评论