注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

沧海的博客

人生如棋 落子不悔

 
 
 

日志

 
 

用代码作日志分割线  

2010-04-29 13:10:02|  分类: 精美分隔线 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
用代码作日志分割线
☆用代碼做日志分割線 - 学 海 - XUE HAI BLOG

一、基本代码: <HR align=center width=500 color=#987cb9 SIZE=1>

说 明∶改变SIZE=1数值可调整分割线宽

效 果 图 如 下 所 示



二、特效

1、两头渐变透明: <HR style="FILTER: alpha(opacity=100,finishopacity=11,style=3); TEXT-ALIGN: center" width=500 color=#ffffb9 SIZE=3>

说 明∶改变SIZE=3、opacity=100数值可调整分割线宽和透明度

效 果 图 如 下 所 示



2、纺锤形: <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=2); TEXT-ALIGN: center" width=500 color=#ffffb9 SIZE=10>

说 明∶改变SIZE=3、opacity=100数值可调整分割线宽和透明度

效 果 图 如 下 所 示



3、右边渐变透明: <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=1); TEXT-ALIGN: center" width=500 color=#ffffb9 SIZE=3>

说 明∶改变SIZE=3、opacity=100数值可调整分割线宽和透明度

效 果 图 如 下 所 示



4、左边渐变透明: <HR style="FILTER: alpha(opacity=0,finishopacity=100,style=1); TEXT-ALIGN: center" width=500 color=#ffffb9 SIZE=3>

说 明∶改变SIZE=3、finishopacity=100数值可调整分割线宽和透明度

效 果 图 如 下 所 示



5、虚线与锯齿线: <HR style="BORDER-RIGHT: #987cb9 1px dashed; BORDER-TOP: #987cb9 1px dashed; BORDER-LEFT: #987cb9 1px dashed; BORDER-BOTTOM: #987cb9 1px dashed; TEXT-ALIGN: center" width=500 color=#987cb9 SIZE=2>

说 明∶改变SIZE=2的数值(1~2时为虚线3往上为锯齿状线)、finishopacity=100数值可调整分割线宽和透明度

效 果 图 如 下 所 示



虚线与锯齿线又一效果: <HR style="BORDER-RIGHT: #987cb9 1px dashed; BORDER-TOP: #987cb9 7px dashed; BORDER-LEFT: #987cb9 1px dashed; BORDER-BOTTOM: #987cb9 1px dashed; TEXT-ALIGN: center" width=500 color=#987cb9 SIZE=10>

说 明∶分别改变BORDER-TOP: #987cb9 7px和BORDER-BOTTOM: #987cb9 1px的数值(1~9时出显示不同效果分割线)。

效 果 图 如 下 所 示





6、双线: <HR style="BORDER-RIGHT: #987cb9 3px double; BORDER-TOP: #987cb9 3px double; BORDER-LEFT: #987cb9 3px double; BORDER-BOTTOM: #987cb9 3px double; TEXT-ALIGN: center" width=500 color=#987cb9 SIZE=7>

说 明∶改变SIZE=7可调整分割线宽(与后面调整配合)、BORDER-TOP: #987cb9 3px和BORDER-BOTTOM: #987cb9 3px数值可调整上下分割线宽

效 果 图 如 下 所 示



7、立体效果: <HR style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:240,strength:15); TEXT-ALIGN: center" width=500 color=#987cb9 SIZE=3>

说 明∶改变SIZE=3数值调上实边宽、改变strength:15数值可调下虚边宽、调整direction:240数值为340、240或140时分别为齐头、左躞斜角或右斜角

效 果 图 如 下 所 示




8、钢针效果: <HR style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10); TEXT-ALIGN: center" width=500 color=#987cb9 SIZE=2>

说 明∶改变SIZE=3数值可调整中部实心宽、改变strength=10数值可调整外围虚边宽

效 果 图 如 下 所 示




引用 学 海☆用代碼做日志分割線

  评论这张
 
阅读(71)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017