启野的博客

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

日志

关于我

启野

B型天秤座

文章分类

HTML 用一张透明角隅图片做角隅边框的代码（启野独立创作）

2011-02-16 02:56:10| 分类： HTML专区 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

角隅边框制作代码

博文简介：

用一张透明角隅图片做边框四角：左上角、右上角、左下角、右下角。

Filter滤镜里只有FlipH（水平滤镜）和FlipV（垂直滤镜）两个滤镜实现翻转，所以只能做出左上角、左下角、右上角、三个的代码，缺少右下角。

搜遍整个网络没有制作右下角的代码，但通过想象和思考终于找出了解决的办法。这两个滤镜不仅可以实现文字和图片的翻转，而且可以实现html表格的翻转（有人会想表格是方的翻转没有意义，但表格里有图片翻转就有所不同了，不怕做不到，就怕想不到）。

我先用FlipH（水平滤镜）翻转做出左上角、右上角的代码，在进行FlipV（垂直滤镜）翻转，做出了左下角、右下角，最后合成代码。

滤镜介绍：

Flip是CSS滤镜的翻转属性：

FlipH代表水平方向翻转

FlipV代表垂直方向翻转

它们的原理都是制作一个镜像，然后让指定元素在水平或垂直方向实现翻转。它们的表达式很简单，分别是：

Filter:FlipH

Filter:FlipV

备注：当代码在运用的过程中不能翻转，一定是自己的代码中的标点符不是英文标点符号，及时替换过来。

制作总述：

制作文本修饰边框基本的方法是表格嵌套

（学习表格嵌套方法—点击HTML表格标记详解8：表格嵌套）

角隅边框的制作最基本的是做四组代码进行表格嵌套：

依次顺序分别是

背景图代码

水平翻转顶栏代码

编辑文本框代码

垂直翻转底栏代码

背景图代码是总表格负责整体的排版。

水平翻转顶栏代码、编辑文本框代码、垂直翻转底栏代码是嵌套的表格负责各个子栏目的排版，并插入到背景图代码（总表格）的相应位置中。

下面将分步介绍制作：

基本素材：

透明角隅图片一张（主图片）

图片地址：http://img17.bimg.126.net/photo/FWSlW0vHQg5tqZw2KC3ZlA==/586593851465444985.jpg

背景图片一张

图片地址：http://img472.ph.126.net/x3bkz3FwBkr0keqKVjLX1w==/1034139064436151618.jpg

边框线图片一张

图片地址：http://img843.ph.126.net/38fuol8pwxvqAqfNL5u_hA==/879609302221380004.jpg

1、背景图代码（总表格）

HTML代码：

相关设置详细说明：

cellSpacing=0单元格间距属性

cellPadding=0单元格边距属性

在这里不需要,设置为0，如你需要自行设置。

width=100%是表格的宽度，因为是总表格建议设置为100%，让表格自适应。

height自适应，去掉了高度。

background=背景图片地址是背景图像属性

border=0是表格的边框属性，在这里设为0，如你需要自行设置。

相关设置详细说明：

红色宽度数值的百分比根据不同的ie浏览器的需要更改，才能正确显示角隅图像的宽度。

表格里添加了两个标准单元格<TD>，在单元格内添加角隅图片并定位。

第一个<TD>单元格

定位图片为左上角：

width="2%"定位图片为左边，占据表格的空间比例。

带入图片代码：

<IMG height=高度 src="角隅图片地址" width=宽度>，可以修改图片的大小。

第二个<TD>单元格

定位图片为左上角：

width="50%" 、align 属性规定段落中文本的对齐方式，<P align=right>图片右对齐，这样定位图片为右边，占据表格的空间比例。

带入图片代码：

<IMG style="FILTER: FlipH" height=高度 src="角隅图片地址" width=宽度>,添加角隅图片地址与第一个<TD>单元格的角隅图片地址相同，并调节图片大小也相同。其中style="FILTER: FlipH"定义图片样式为水平滤镜（即：水平翻转）。

备注：当代码在运用的过程中不能翻转，一定是自己的代码中的标点符不是英文标点符号，及时替换过来。

示例：

用一张透明角隅图片做角隅边框的代码（启野独立创作） - qy-0824 - 启野的博客

3、编辑文本框代码（并列嵌套的第二个表格）

HTML代码：

相关设置详细说明：

1.这个表格由两个表格在<TD>标签中进行了嵌套。

分为外表格和内表格，内表格嵌套在外表格的<TD>标签中。

2.加入了<CENTER>标签对其包围的文本进行水平居中处理。

3.在这里需要设置

cellSpacing（单元格间距属性）

cellPadding（单元格边距属性）

4.根据自己的需要调节宽度，调节上下两个表格的图片宽度相同并小于总表格背景图的宽度。

示例：

文本编辑

4、垂直翻转底栏代码（并列嵌套的第三个表格）

HTML代码：

相关设置详细说明：

<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD style="Filter:FlipV">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD width="2%" ><IMG height=高度 src="角隅图片地址" width=宽度></TD>
<TD width="50%">
<P align=right><IMG style="FILTER: FlipH" height=高度 src="角隅图片地址" width=宽度

></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

红色宽度数值的百分比根据不同的ie浏览器的需要更改，才能正确显示角隅图像的宽度。

这个表格和编辑文本框代码一样由两个表格在<TD>标签中进行了嵌套组成。

分为内表格和外表格

内表格直接借用水平翻转顶栏代码

外表格<TD>标签内加入style="Filter：FlipV"定义表格样式为垂直滤镜（即：垂直翻转）。

在这里是表格垂直翻转，同样表格内的图片也就垂直翻转了。

备注：当代码在运用的过程中不能翻转，一定是自己的代码中的标点符不是英文标点符号，及时替换过来。

示例：

HTML 用一张透明角隅图片做角隅边框的代码（启野独立创作） - 启野 - 启野的博客

5、角隅边框代码的合成

HTML代码：

相关设置详细说明：

<TABLE cellSpacing=0 cellPadding=0 width=100% background=背景图片地址 border=0>
<TBODY>
<TR>
<TD><TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD width="2%" ><IMG height=高度 src="角隅图片地址" width=宽度></TD>
<TD width="50%">
<P align=right><IMG style="FILTER: FlipH" height=高度 src="角隅图片地址" width=宽度></P></TD></TR></TBODY></TABLE><CENTER>
<TABLE style="WIDTH: 800px; HEIGHT: 1px" background=边框线图片地址 border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=5 cellPadding=10 width=800 background=背景图片地址 border=0>
<TBODY>
<TR>
<TD>文本编辑</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER><TABLE cellSpacing=0 cellPadding=0 width="100%"

border=0>
<TBODY>
<TR>
<TD style="Filter:FlipV">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD width="2%" ><IMG height=高度 src="角隅图片地址" width=宽度></TD>
<TD width="50%">
<P align=right><IMG style="FILTER: FlipH" height=高度 src="角隅图片地址" width=宽度></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

红色宽度数值的百分比根据不同的ie浏览器的需要更改，才能正确显示角隅图像的宽度。

背景图代码是总表格看成是外表格负责整体的排版。

水平翻转顶栏代码、编辑文本框代码、垂直翻转底栏代码是并列内表格，并且有序的嵌套起来。就如同学生的书包装书，上层是水平翻转顶栏代码、中层是编辑文本框代码、下层是垂直翻转底栏代码。形象理解，看简单！

在嵌套时，先不要删除背景代码的文本编辑四个字，容易找到嵌套的位置，最后一次嵌套就时就删除。

备注：当代码在运用的过程中不能翻转，一定是自己的代码中的标点符不是英文标点符号，及时替换过来。

示例：

复制——

用一张透明角隅图片做角隅边框的代码（启野独立创作） - qy-0824 - 启野的博客

启野博客欢迎你光临交流

文本编辑

这里是输入文字的地方，还可以放图片代码、Flash动画代码和gif动态小图代码。

欢迎光临启野博客！风起的日子给自己冲杯咖啡，在苦涩中捕捉那瞬间的美，将生活中的往事细细回味，伤心时的累，开心时的醉，抬头望望天空依然很美！

用一张透明角隅图片做角隅边框的代码（启野独立创作） - qy-0824 - 启野的博客

复制——

相关链接：
相关透明角隅边框图片链接：	相关素材、表格制作链接：	其他博客技巧链接：
透明角隅边框素材01（直角明珠）透明角隅边框素材02（直角蝴蝶）透明角隅边框素材03（非直角花藤）透明角隅边框素材04（直角明珠花朵）透明角隅边框素材05（直角明珠黄叶）透明角隅边框素材06（直角扇形宝石花朵）透明角隅边框素材07（直角牵牛花）透明角隅边框素材08（直角带心小花）透明角隅边框素材09（直角明珠花束）透明角隅边框素材10（直角金边花束）	配图素材链接精美透明花开四季　精美透明蝴蝶01 精美透明蝴蝶02 精美透明蝴蝶03 精美透明蝴蝶04 黑色背景闪图分隔线颜色代码链接颜色代码表（一）颜色代码表（二）文本框滚动代码链接 HTML文本框滚动代码1：卷轴基本语法 HTML文本框滚动代码2：为卷轴加外框 HTML文本框滚动代码3：为卷轴调色 HTML文本框滚动代码4：卷轴变化应用 HTML文本框滚动代码5：卷轴黑白灰色应用模板 HTML文本框滚动代码6：卷轴彩色应用模板 HTML表格制作链接 HTML表格初步制作 HTML表格标记详解1：标签定义 TABLE参数设定 HTML表格标记详解2：TR参数设定 HTML表格标记详解3：TD参数设定 HTML表格标记详解4：TD参数中设定跨列跨行属性 HTML表格标记详解5：TH参数中设定 HTML表格标记详解6：CAPTION标题参数设定 HTML表格标记详解7：THEAD表首标记/TBODY表主体标记/TFOOT表尾标记 HTML表格标记详解8：表格嵌套 HTML表格标记详解9：表格边框的css修饰语法 HTML网页列表标记:ul、ol、dir、dl、menu、dt、dd、li HTML水平线段标记：HR 边框代码链接水晶博客边框代码——应用（一）水晶博客边框代码——应用（二）水晶博客边框代码——应用（三）水晶博客边框代码——应用（四）	文字特效代码链接文字特效代码(一) 文字特效代码(二) 图片特效链接在线制作水波纹动感图片多张图片串联式放映代码多图重叠移动代码及效果图图片雾化移动特效代码图片移动效果的欣赏与制作（一）图片移动、及其图片链接网址移动代码（二）让图片产生梦幻效果的代码图片梦幻显现隐藏移动的特效制作（一）图片梦幻显现隐藏的特效制作（二）图片浮雕效果图片虚线边框并黑白效果图片加边框代码图片CSS滤镜效果—灰度图片CSS滤镜—左右旋转效果图片CSS滤镜—阴影效果图片CSS滤镜—波形加上半透明合成效果图片CSS滤镜效果—透明图片CSS滤镜—Ｘ光效果图片CSS滤镜—发光效果图片CSS滤镜—色彩对换效果图片CSS滤镜—波形效果图片CSS滤镜—图片模糊效果图片CSS滤镜—图片动感模糊效果图片CSS滤镜—扭曲效果图片CSS滤镜—倒影效果图片CSS静态滤镜样式(filter)说明 Flash代码链接 Flash圆形雾化移动特效代码 Flash透明动画或文字特效添加一幅背景图 Flash透明动画多个叠加在一张背景图片上自动播放swf格式小视频音画代码链接大图音画拼合的代码使用大图音画拼合效果配图——一卷轻愁书红颜(未调整的效果) 大图音画拼合效果配图——一卷轻愁书红颜（调整后的效果）宽屏大图片音画教程——缱绻殇效果大图音画拼合效果配图——蝴蝶之梦不显示播放器代码背景音乐制作其他技巧代码所有代码的粘贴法在首页添加QQ和POPO在线交谈一种找到图片地址(或者存大图)极简单的方法文字图片的链接日志文字与图片添加日志中导入图片的三种方法日志列表式能使日志成单页面打开并找准日志地址：日志文字的编排——借用word设置（启野原创）博客中的准确网址（原创）博客首页的顶区和底区上传图片如何让网易博客日志显示最大的宽度怎样添加自定义模块和在自定义模块中做动画的超级链接
欢迎光临启野博客！

评论这张

转发至微博

阅读(1800)| 评论(1)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_094069084080087064085085085095083084084067083083082065',
              blogTitle:'HTML 用一张透明角隅图片做角隅边框的代码（启野独立创作）',
              blogAbstract:'  <TABLE border=\"8\" cellSpacing=\"3\" borderColor=\"#003333\" cellPadding=\"0\" width=\"100%\"  align=\"center\" height=\"211\" \>  <TBODY\>  <TR\>  <TD height=\"184\" vAlign=\"top\" \>  <TABLE border=\"1\" cellSpacing=\"2\" borderColor=\"#003333\" cellPadding=\"0\" width=\"100%\"  align=\"center\" height=\"211\" \>  <TBODY\>  <TR\>  <TD height=\"184\" vAlign=\"top\" \>  <TABLE border=\"0\" width=\"100%\"  \>  <TBODY\>  <TR\>  <TD height=\"255\" background=\"http://img47.bimg.126.net/photo/nF2r-niBdRotOr8CAteSvw==/844987880086200326.jpg\" width=\"860\" \><FONT color=\"#ffff00\" size=\"2\" \> </FONT\>   <P align=\"center\" \>  </P\>  <CENTER\><FONT color=\"#ffff00\" size=\"2\" \> </FONT\></CENTER\>  <CENTER\>  <TABLE border=\"0\" width=\"223\" \>  <TBODY\>  <TR\>  </TR\></TABLE\></CENTER\></TD\></TR\></TABLE\></TD\></TR\></TABLE\></TD\></TR\></TABLE\>',
              blogTag:'html',
              blogUrl:'blog/static/72507542201111410430245',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1328888720015,
              publishTime:1297796170832,
              permalink:'blog/static/72507542201111410430245',
              commentCount:1,
              mainCommentCount:1,
              recommendCount:1,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'B型天秤座',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/72507542201111410430245">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

启野的博客

导航

日志

HTML 用一张透明角隅图片做角隅边框的代码（启野独立创作）

历史上的今天

最近读者

热度

评论

页脚