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

一车,一房,一个温暖家

10万左右的车,80平方的房子,这是我奋斗的暖暖的家

 
 
 

日志

 
 

【转载】css- 划线  

2015-04-07 14:47:09|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自lei_xu《css- 划线》
css划线 css画线
实心的线条:<HR align=left width=490 color=#990099 SIZE=3 noShade>

竖直线:<HR align=center width=1 color=red size=100>


虚线:<hr size=1 style="color: blue;border-style:dotted;width:490">

size=1:

size=2:

size=3:

size=4:

size=5:

size=6:

size=7:

size=8:

size=9:

size=20:

双线:<hr size=1 style="COLOR:#ff9999;border-style:double;width:490">

size=1:

size=2:

size=3:

size=4:

size=5:

size=6:

size=7:

size=8:

size=9:

size=20:

立体感: <hr size=8 style="COLOR: #ffd306;border-style:outset;width:490;">


size=20:

左边逐渐变透明:<hr size="2" color="#ff9966" style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=0,startY=0,finishX=100,finishY=100);width:490;">


右边逐渐变透明:<hr size="2" color="#ff9966" style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=100,startY=100,finishX=0,finishY=0);width:490;">



样式:

代码如下:

<hr STYLE="WIDTH: 100%; COLOR: #999; BORDER-TOP-STYLE: dashed; BORDER-RIGHT-STYLE: dashed; BORDER-LEFT-STYLE: dashed; HEIGHT: 1px; BORDER-BOTTOM-STYLE: dashed"></HR>

用<hr>标签
最基本的:<hr width=300 size=1 color=#5151A2 align=center noshade>
其中 width 规定线条的长度,还可以是百分比;color 表示颜色,size 表示厚度;
align 规定线条位置,有left(左对齐)、right(右对齐)、center(中对齐);noshade 表示是否有立体效果。

两头渐变透明: (利用CSS滤镜处理)
<hr width=80% size=3 color=#5151A2 style="FILTER: alpha(opacity=100,finishopacity=0,style=3)">

右边渐变透明:
<hr width=80% size=3 color=#5151A2 style="FILTER: alpha(opacity=100,finishopacity=0,style=1)">
画虚线:
<hr width=80% size=1 color=#5151A2 style="border:1 dashed #5151A2">

画双线:
<hr width=80% size=3 color=#5151A2 style="border:3 double green">

立体效果:
<hr width=80% size=3 color=#5151A2 style="filter:progid:DXImageTransform.Microsoft.Shadow(color#5151A2,direction:145,strength:15)">

纺棰形:
<hr width=80% size=30 color=#5151A2 style="filter:alpha(opacity=100,finishopacity=0,style=2)">

钢针效果:
<hr width=80% size=3 color=#5151A2 style="filter:progid:DXImageTransform.Microsoft.Glow(color=#5151A2,strength=10)">
也可以利用<table>标签
如<table width="100%"><tr><td height="1" bgcolor="#FF0000"></td></tr></table>或者利用CSS里的background属性,更方便控制划线效果,比如像一个一像素的点(dot.gif)
水平划线:<td style="background:url(dot.gif) repeat-x center">&nbsp;</td>
垂直划线:<td style="background:url(dot.gif) repeat-y center">&nbsp;</td>
当然还有其他很多方法,大家可以参考HTML及CSS相关资料


样式:

代码如下:

<HR>
&nbsp;

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

用简单的“hr”语句就能实现多样化的分割效果:
  最基本的:<hr width=300 size=1 color=#5151A2 align=center noshade>

  
  其中 width 规定线条的长度,还可以是百分比;color 表示颜色,size 表示厚度;
align 规定线条位置,有left、right、center;noshade 表示是否有立体效果。
  两头渐变透明:
<hr width=80% size=3 color=#5151A2 style="FILTER: alpha(opacity=100,finishopacity=0,style=3)">

  右边渐变透明:
<hr width=80% size=3 color=#5151A2 style="FILTER: alpha(opacity=100,finishopacity=0,style=1)">


  画虚线:
<hr width=80% size=1 color=#5151A2 style="border:1 dashed #5151A2">


  画双线:
<hr width=80% size=3 color=#5151A2 style="border:3 double green">


  立体效果:
<hr width=80% size=3 color=#5151A2 style="filter:progid:DXImageTransform.Microsoft.Shadow(color#5151A2,direction:145,strength:15)">


  纺棰形:
<hr width=80% size=30 color=#5151A2 style="filter:alpha(opacity=100,finishopacity=0,style=2)">


  钢针效果:
<hr width=80% size=3 color=#5151A2 style="filter:progid:DXImageTransform.Microsoft.Glow(color=#5151A2,strength=10)">


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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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