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

zqsxjf的博客

但得夕阳无限好,何须惆怅近黄昏.

 
 
 

日志

 
 

《解析HTML边框》  

2013-09-15 08:11:02|  分类: 代码 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

一、虚线边框

 先来看一下代码:

 <TABLE style="BORDER-RIGHT: #ff0000 3px dashed; BORDER-TOP: #ff0000 3px dashed; BORDER-LEFT: #ff0000 3px dashed; WIDTH: 691px; BORDER-BOTTOM: #ff0000 3px dashed; HEIGHT: 50px" cellSpacing=5 cellPadding=0 align=center bgColor=#ff0000>

 <TBODY>

 <TR>

 <TD vAlign=center align=middle width=60 bgColor=#0000ee height=30></TD></TR> </TBODY> </TABLE>

 边框效果如下图:

博客文章色彩背景代码 - 江南浪子 - 江南浪子的博客

 可能的参数值 

描述

none

定义无边框

dotted

点状边框

dashed

虚线边框

solid

实线边框

double

双线边框,双线的宽度等于border-width的值。

groove

凹槽边框

其效果取决于border-color的值

ridge

垄状边框

inset

Inset边框

outset

Outset边框

inherit

规定从父元素继承边框样式 

BORDER-RIGHT表示右边框,BORDER-TOP表示顶边框,BORDER-LEFT表示左边框,BORDER-BOTTOM表示底边框。

二、点线边框

从可能的值中我们可以看到dashed是虚线边框,我们将上面的dashed改为dotted看点状边框的效果。

代码:

<TABLE style="BORDER-RIGHT: #ff0000 3px dotted; BORDER-TOP: #ff0000 3px dotted; BORDER-LEFT: #ff0000 3px dotted; WIDTH: 691px; BORDER-BOTTOM: #ff0000 3px dotted; HEIGHT: 50px" cellSpacing=5 cellPadding=0 align=center bgColor=#ff0000>

<TBODY>

<TR>

<TD vAlign=center align=middle width=60 bgColor=#0000ee height=30></TD></TR> </TBODY> </TABLE>

边框效果如下图:

博客文章色彩背景代码 - 江南浪子 - 江南浪子的博客

三、

3D垄状边框

代码:

<TABLE style="BORDER-RIGHT: #ff0000 10px ridge; BORDER-TOP: #ff0000 10px ridge; BORDER-LEFT: #ff0000 10px ridge; WIDTH: 691px; BORDER-BOTTOM: #ff0000 10px ridge; HEIGHT: 50px" cellSpacing=5 cellPadding=0 align=center bgColor=#ff0000>

<TBODY>

<TR>

<TD vAlign=center align=middle width=60 bgColor=#0000ee height=30></TD></TR> </TBODY> </TABLE>

边框效果如下图:

博客文章色彩背景代码 - 江南浪子 - 江南浪子的博客

 四、

3D凹槽边框

代码:

<TABLE style="BORDER-RIGHT: #ff0000 10px groove; BORDER-TOP: #ff0000 10px groove; BORDER-LEFT: #ff0000 10pxgroove; WIDTH: 691px; BORDER-BOTTOM: #ff0000 10px groove; HEIGHT: 50px" cellSpacing=5 cellPadding=0 align=center bgColor=#ff00ee>

<TBODY>

<TR>

<TD vAlign=center align=middle width=60 bgColor=#0000ee height=30></TD></TR> </TBODY> </TABLE>

边框效果如下图:

博客文章色彩背景代码 - 江南浪子 - 江南浪子的博客

其他值我没有试,总之改变边框的属性值即可以改变边框的样式。

五、去掉内边框时的虚线边框

代码:

<TABLE style="BORDER-RIGHT: #ff0000 3px dashed; BORDER-TOP: #ff0000 3px dashed; BORDER-LEFT: #ff0000 3px dashed; WIDTH: 691px; BORDER-BOTTOM: #ff0000 3px dashed; HEIGHT: 50px" >

<TBODY>

<TR>

<TD vAlign=center align=middle width=60 bgColor=#0000ee height=30></TD></TR> </TBODY> </TABLE>

边框效果如下图:

博客文章色彩背景代码 - 江南浪子 - 江南浪子的博客

 代码输入可以在发博文时选中编辑窗口下面的“显示源代码”,然后输入代码,再取消“显示源代码”即可正常显示。

我们可以举一反三的修改一下颜色、高度、宽度等试一试,很好玩的。

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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