HTML如何做出分割线效果
2017-12-17 20:37
471 查看
HTML分割线效果
本文转载自:http://blog.csdn.net/alex8046/article/details/51917069
一、普通
1、
2、
align 线条位置(可选left、right、center);width 线条长度;color 颜色;size 厚度
二、特效(效果并不是孤立的,可相互组合)
1、两头渐变透明:
2、纺锤形:
3、右边渐变透明:
4、左边渐变透明:
5、虚线:
6、双线:
7、立体效果:
8、钢针效果:
9.垂直分割线
本文转载自:http://blog.csdn.net/alex8046/article/details/51917069
一、普通
1、
<HR>
2、
<HR align=center width=300 color=#987cb9 SIZE=1>
align 线条位置(可选left、right、center);width 线条长度;color 颜色;size 厚度
二、特效(效果并不是孤立的,可相互组合)
1、两头渐变透明:
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3>
2、纺锤形:
HR style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" width="80%" color=#987cb9 SIZE=10>
3、右边渐变透明:
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=1)" width="80%" color=#987cb9 SIZE=3>
4、左边渐变透明:
<HR style="FILTER: alpha(opacity=0,finishopacity=100,style=1)" width="80%" color=#987cb9 SIZE=3>
5、虚线:
<HR style="border:1 dashed #987cb9" width="80%" color=#987cb9 SIZE=1>
6、双线:
<HR style="border:3 double #987cb9" width="80%" color=#987cb9 SIZE=3>
7、立体效果:
<HR style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)" width="80%" color=#987cb9 SIZE=1>
8、钢针效果:
<HR style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10)" width="80%" color=#987cb9 SIZE=1>
9.垂直分割线
<table border="1px" cellpadding="0" cellspacing="0" style="height:265px;border-left-style:solid; border-bottom-style:none;border-right-style:none;border-top-style:none">
相关文章推荐
- HTML如何做出这种效果的进度条
- 如何用PS快速做出3D按钮效果的图片
- 如何在matlab中做出标签页的效果
- Expression Design 4 - Chapter 5 教你如何用自製笔刷在5分钟内做出设计感效果
- echarts如何做出堆积图总计的效果
- 通过示范在 CSS 的帮助下如何把单一的 HTML 文件转换成两张展现效果完全不同的网页
- 如何做出像Foxmail、MSN的消息窗体的效果
- 如何使得WIN7下用VS2010做出的MFC程序具有XP风格(摆脱传统界面的效果)
- Expression Design 4 - Chapter 6 教你如何在5分钟内做出文字立体感效果
- html中的em和rem到底该如何使用,自适应效果中如何确定文字大小/字号?
- as3如何做出残影效果
- 如何查看github的html页面显示效果
- 如何做出像Foxmail、MSN的消息窗体的效果
- 字符串类型html如何显示出html效果,字符串中的转义符以html效果显示出来,html编码, HtmlHelper.Raw()
- 如何做出“报表加载请稍后”的效果
- listview的条目(item)如何做出卡片效果
- [Javascript]如何在HTML中实现点击input输入框(获得焦点)后默认提示消失的效果
- 如何定义html hr 样式(多种效果)
- 如何在Grid中做出快捷菜单效果?
- 零元学Expression Design 4 - Chapter 5 教你如何用自制笔刷在5分钟内做出设计感效果