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

壳子的博客

学无止境

 
 
 

日志

 
 

立体边框样式框线颜色  

2010-06-07 18:33:17|  分类: 音画边框制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

引用

zhong-wei-jie立体边框的样式●框线●颜色-立体边框应用开篇

 

、 边框的类型

        边框是表格代码及其属性的最典型应用,边框的类型可分为:平面边框和立体边框两种,都是表格的一种特殊形式,利用其样式的特殊变化组合而成。
●平面边框由双框线的阳框结构、宽-窄及其距离的变化,配以不同的框线颜色、背景颜色或不同的背景图片(插图)组合而成。
●立体边框则是突出其框线的阴-阳结构特点,并变化其宽-窄,再配以不同的框线颜色组合而成,当然也允许在一定条件下插入背景颜色或不同的背景图片。

●本帖只讨论立体边框。点此看《平面边框》。

二、 立体边框

●立体边框的典型结构和效果图如下表所示:

●当取需要的层,或改变其框线的宽-窄,或改变其框线的颜色,可以组成不计其数的立体边框,仅举几例列于表中。

5层边框嵌套样式、线间距离及边框线宽的典型结构
A B C D E F G H I J K L M

编号
BORDER-LEFT-COLOR: BORDER- BOTTOM-COLOR: BORDER-TOP-STYLE: BORDER-TOP-COLOR: BORDER-RIGHT-STYLE: BORDER-LEFT-STYLE: BORDER-COLLAPSE: BORDER-RIGHT-COLOR: BORDER-BOTTOM-STYLE: Cellpacing CellPadding border
样式意义

左边框线
颜色

下边框线
颜色

上边框
线型

上边框线
颜色

右边框
线型

左边框
线型

 合并边框

右边框
线颜色

下边框
线型

框线与边
线间距离

边框线
间距离

边框
线宽

1层 #ff99cc; #ff99cc; groove; #ff99cc; groove; groove; collapse; #ff99cc; groove; 0 0 5
2层 ridge; ridge; ridge; ridge;
3层 groove; groove; groove; groove;
4层 ridge; ridge; ridge; ridge; 15
5层 groove; groove; groove; groove; 5

6

效果图

组成说明

7

上表的具体效果图

该边框是由2、4两个阳框(ridge)和1、3、5三个阴框(groove)组成的,边框线使用同一种颜色(#ff99cc),很有一点立体感,可作相框使用。

8

组成见右边说明

阴-阳边线框

单一实线阳框

左上图边框系取消上表中的4-5两层,由2层一个阳框(ridge)和1、3两个阴框(groove)组成的,边框线使用原来的同一种颜色(#ff99cc),仍然有一点立体感,可作相框使用。

保留上图边框的2、3层,得左中图的样式。阳线(ridge)框线宽(3~8)px,阴线(groove)框线宽(3~5)px,用同一种颜色#cc0000(或你喜欢的),也可以将阴框线的颜色选得比阳框线明亮一点或暗一点,会更显其立体感。可自己或与单一实线框组成各种精美边框、专用图形。《颜色代码大全》里可直接选取需要的颜色。

左下图是单一实线阳框(ridge),框线宽(3~8)px,颜色#cc0000(或你喜欢的),背景颜色#99ffcc 。

  评论这张
 
阅读(780)| 评论(0)

历史上的今天

评论

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

页脚

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