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

启野的博客

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

 
 
 

日志

 
 

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

2011-07-05 21:47:32|  分类: HTML专区 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

CSS语言边框

博文介绍

 

 

有关上边框宽度、右边框宽度、下边框宽度、左边框宽度、边框宽度、边框颜色、边框样式、上边框、下边框、左边框、右边框、边框、宽度、高度、有关标签等。

参照:HTML表格标记详解9:表格边框的css修饰语法

在这里主要强调边框样式属性border-styleborderColor可以作为内边框的颜色,外边框在变化。

滤镜在边框样式中的运用。

 

 
一、边框样式
1、一般边框

 

 

参照:

HTML日志边框代码制作1:纯色彩色边框

 

<TABLE borderColor=#003333 height=330 cellSpacing=10 cellPadding=10 width=800 align=center bgColor=#006666 border=16>
<TBODY>
<TR>
<TD>这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。
</TD></TR>

</TBODY></TABLE>

 

 

效果如下:

 

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

 

2、边框样式(none:无样式)

 

 

代码:

<TABLE   borderColor=#FF3300 height=330  cellSpacing=10 cellPadding=5 width=800 align=center style="border:5 none" bgColor=#006666 border=16>
<TBODY>
<TR>
<TD>这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。
</TD></TR>
</TBODY></TABLE>


说明:

外边框为默认为黑色,内边框颜色为borderColor=#FF3300

 

 

效果如下:

 

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

 

3、边框样式(dotted:点线)

 

 

 代码:

<TABLE borderColor=#FFFF00 height=330  cellSpacing=10 cellPadding=5 width=800 align=center style="border:5 dotted #CC0033" bgColor=#006666 border=16>
<TBODY>
<TR>
<TD>这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。
</TD></TR>
</TBODY></TABLE>

 

说明:

外边框样式为

style="border:5 dotted #CC0033" bgColor=#006666

border:5           外边框的宽度
dotted             样式为点线
#CC0033            颜色值
bgColor=#006666    背景颜色值

 

内边框颜色为
borderColor=#FFFF00

 

 

效果如下:

 

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

 

4、边框样式(dashed:虚线)

 

 

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

 

 

效果如下:

 

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

 

5、边框样式(solid:实线)

 

 

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

 

 

效果如下:

 

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

 

6、边框样式(double:双线)

 

 

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

 

 

效果如下:

 

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

 

7、边框样式(groove:槽线)

 

 

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

 

 

效果如下:

 

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

 

8、边框样式(ridge:脊线)

 

 

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

 

 

效果如下:

 

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

 

9、边框样式(inset:内凹)

 

 

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

 

 

效果如下:

 

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

 

10、边框样式(outset:外凸)

 

 

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

 

 

效果如下:

 

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

 

11、边框样式(dashed:虚线的变化样式——邮票框)

 

 

当style外边框的颜色值和bgColor背景的颜色值相同时重叠形成邮票锯齿状。

 

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

 

 

效果如下:

 

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

 

12、边框样式的结合样式

 

dashed样式嵌套inset样式,设置border=0

 

<TABLE 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动画)。

 

 

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

历史上的今天

评论

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

页脚

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