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

启野的博客

淡淡的雾,淡淡的雨,淡淡的云彩悠悠的游。

 
 
 

日志

 
 

HTML日志边框代码制作3:CSS语言边框(二)  

2011-07-06 17:00:44|  分类: HTML专区 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

CSS语言边框

博文介绍

 

 

滤镜filter在边框中的运用,

相关点击:HTML滤镜代码——filter 属性 

二、滤镜边框
1、边框样式加载投射阴影滤镜

 

 

<TABLE style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color: #00ffff ,direction:145,strength:15)"
borderColor=#FFFF00 height=330 cellSpacing=10 cellPadding=5 width=800 align=center style="border:5 dashed #003333"
bgColor=#003333 border=0>
<TBODY>
<TR>
<TD><TABLE borderColor=#FFFF00 height=330  cellSpacing=10 cellPadding=5 width=760 align=center style="border:10 inset #00ffff"
bgColor=#003333 border=0>
<TBODY>
<TR>
<TD>这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层
透明flash动画)。
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

 

 

 

投射阴影滤镜

style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color: #00ffff ,direction:145,strength:15)"

 

在边框中运用投射阴影滤镜必须加载这段语句“progid:DXImageTransform.Microsoft.”

 

 

效果如下:

 

这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。

 

2、边框样式加载发光滤镜

  

发光滤镜

style="FILTER: Glow(color=#ccFF66,strength=20)"
<TABLE style="FILTER: Glow(color=#ccFF66,strength=20)" height=440 width=800 align=center>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#FFFF00 height=330 cellSpacing=10 cellPadding=5 width=760 align=center style="border:5 dashed #003333"
bgColor=#003333 border=0>
<TBODY>
<TR>
<TD><TABLE borderColor=#FFFF00 height=330  cellSpacing=10 cellPadding=5 width=720 align=center style="border:10 inset #00ffff"
bgColor=#003333 border=0>
<TBODY>
<TR>
<TD>这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层
透明flash动画)。
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

 

 

效果如下:

 

这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。

3、边框样式加载模糊

  

模糊滤镜
style="FILTER: Blur(Add=true, Direction=180, Strength=20)" 使边框模糊,产生水晶般的效果。

参照:

水晶博客边框代码——应用(一)

水晶博客边框代码——应用(二)

水晶博客边框代码——应用(三)

水晶博客边框代码——应用(四)

 

<TABLE style="FILTER:Blur(Add=true, Direction=180, Strength=20)" borderColor=#FFFF00 height=330 cellSpacing=10 cellPadding=5
width=800 align=center style="border:5 dashed #003333" bgColor=#003333 border=0>
<TBODY>
<TR>
<TD><TABLE borderColor=#FFFF00 height=330  cellSpacing=10 cellPadding=5 width=760 align=center style="border:10 inset #00ffff" bgColor=#003333 border=0>
<TBODY>
<TR>
<TD>这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层
透明flash动画)。
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

 

 

效果如下:

 

这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。

 

4、边框样式加载渐变(加载在单元格内最佳)

  

<TABLE border="15" width="800" align=center cellspacing="5" cellpadding="5" bgcolor="#006666" bordercolor="#003333" id="table1"
height="330">
<TBODY>
<TR>
<TD style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#009966', endColorStr='#ffffff', gradientType='1')">  
</TD></TR></TBODY></TABLE>

 

 

效果如下:

 

 

 

 

  评论这张
 
阅读(668)| 评论(1)
推荐 转载

历史上的今天

评论

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

页脚

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