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

寒情博客

http://8-com.blog.163.com

 
 
 

日志

 
 

CSS特效分割线样式与代码  

2010-07-15 02:31:33|  分类: 〓博客教程〓 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
站内留言 交换链接 本站资源 电子邮件 QQ互动

1:点状虚线


代 码 如 下<HR style="BORDER-RIGHT: 3px dotted; BORDER-TOP: 3px dotted; BORDER-LEFT: 3px dotted; BORDER-BOTTOM: 3px dotted" color=#OOFFFF width=600 align=center>



2:块状虚线


代 码 如 下<HR style="BORDER-RIGHT: 3px dashed; BORDER-TOP: 3px dashed; BORDER-LEFT: 3px dashed; WIDTH: 580px; BORDER-BOTTOM: 3px dashed" align=center color=#00ff00>



3:波浪线效果


代 码 如 下<HR width=580 size=3 color=#FF00CC style="border:1 dashed #FF00CC" align=center>



4:双线效果


代 码 如 下<HR style="BORDER-RIGHT: #00ff00 3px double; BORDER-TOP: #00ff00 3px double; BORDER-LEFT: #00ff00 3px double; BORDER-BOTTOM: #00ff00 3px double" align=center width=580 SIZE=3>



5:两边透明渐变效果


代 码 如 下<HR width=580 size=4 color=#0000FF align=center style="FILTER: alpha(opacity=100,finishopacity=0,style=3)">



6:右侧透明渐变效果


代 码 如 下<HR width=580 size=4 color=#0000FF align=center style="FILTER: alpha(opacity=100,finishopacity=0,style=1)">



7:左侧透明渐变效果


代 码 如 下<HR style="FILTER: alpha(opacity=5,finishopacity=100,style=1,startX=0,startY=0,finishX=100,finishY=100); HEIGHT: 5px" width=580 color=#0000ff align=center>



8:立体阴影效果


代 码 如 下<HR style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#FF0000,direction:150,strength:15)" width=580 color=#00ff00 SIZE=5>


9:粒子扩散效果


代 码 如 下<HR style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#ffff00,strength=10)" width=580 color=#ffff00 SIZE=3>


10:粒子两边雾化效果


代 码 如 下<HR width=550 size=30 color=#FF00FF style="filter:alpha(opacity=150,finishopacity=0,style=2)">


11:线框式效果


代 码 如 下<HR style="BORDER-RIGHT: 2px groove; BORDER-TOP: 2px groove; BORDER-LEFT: 2px groove; WIDTH: 580px; BORDER-BOTTOM: 2px groove; HEIGHT: 7px" color=#ff00ff align=center>


12:邮票式效果


代 码 如 下<HR width=580 size=10 color=#fff000 style="border:3 dashed #00ffff" bgcolor="#00ffff">


分隔线的用法其实很简单且可以多变,在编辑模式中,打开右上角的“全部功能”找到“”并点击,就会产生一条分隔线,用滑鼠标对准产生的分隔线并点击,直到分隔线出现四周出现许多小白点方格,这时可以用鼠标左键点准并摁住其中一个小白格上下拖动调整大小,而颜色可以利用文字色彩常用的“ A”符号改变。




<HR WIDTH=510 size=3 color=#ff00ff align=center>

WIDTH=510   表示分隔线宽度(长度)  size=3 表示分隔线高度(厚度)

color=#ff00ff 分隔线颜色      align=center 中对齐 centerleft 左  right

具体颜色设置请参照——〓HTML颜色代码表〓

相关图片CSS滤镜效果请参照——〓最新图片滤镜效果代码〓

CSS特效分割线样式与代码 - 寒情 - 寒情博客
     创意友情链接(电影胶片) - 寒情 - 寒情博客 移动文字全都汇 创意友情链接(电影胶片) - 寒情 - 寒情博客     创意友情链接(电影胶片) - 寒情 - 寒情博客 日志题图应用与代码
     创意友情链接(电影胶片) - 寒情 - 寒情博客 教你批量下载图片     透明flash·荷花素材(10) - 寒情 - 寒情博客 教你不用软件截图
     透明flash·荷花素材(10) - 寒情 - 寒情博客 博客公告栏制作     透明flash·荷花素材(10) - 寒情 - 寒情博客 如何上传Flash文件
     透明flash·荷花素材(10) - 寒情 - 寒情博客 如何下载Flash动画     透明flash·荷花素材(10) - 寒情 - 寒情博客 滚动条框制作方法
     透明flash·荷花素材(10) - 寒情 - 寒情博客 如何制作日志边框     透明flash·荷花素材(10) - 寒情 - 寒情博客 日志图文排列样式
     透明flash·荷花素材(10) - 寒情 - 寒情博客 日志标题框应用     透明flash·荷花素材(10) - 寒情 - 寒情博客 博客基本代碼解讀
更多的博客技巧与代码——点击阅读 >>>>>
博客技巧 电脑学堂 素材基地 清明上河图版本大全 - 寒情 - 8-com 的博客 软件学院 音画视听 精彩图酷
博客代码 书画艺术 游戏大厅 精美边框 顶栏模版 时钟超市
flash素材 影音素材 查看关于本站的更多信息搏客顶栏动态图片(一) - Q仔 - Q仔*网易博客 经典摘录 收藏本站
如果你喜欢此日志,请点击日志左下方的“推荐”,
让大家分享,也算是对寒情的支持,谢谢!
  评论这张
 
阅读(4942)| 评论(2)
推荐 转载

历史上的今天

评论

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

页脚

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