互联网上网页的样式越来越繁多,看惯了方方正正的图片,
就看见有的网页上带着圆润的边角的图形、表格别有新意。其实,这些效果做起来并不复杂,
一般实现起来有以下几种方法:
1、直接用图片实现。
这是最简单也是最笨的方法,就是用图形处理工具将图片的边角整圆,
然后直接贴上网页。方法虽然简单,但是生成的图片未免字节数太大,尤其是图片数量很多时,
对网页的浏览速度影响很大。
2、用表格和小图片构造圆润的边线。
这种方法要求制做两幅背景透明的图片,图片上的直线两头弯曲,
分别作为表格的上边和底边。然后用表格构造出左、右两个边,四条线围成一个圆角的矩形,
看起来浑然一起,非常美观(图一)。代码示例如下,其中上、下两幅图片为 table_top.gif 和
table_bottom.gif,左右边线用宽度为 1、背景色为 #ff9900 的表格单元实现:
 |
|
用表格和小图片构造 圆润的边线
|
|
 |
3、用表格和小图片“削”圆边角。
这种方法可以制做圆角实心的矩形图形(图二)。整圆四个角使用了四幅
6x6 的微型图片,图片一半透明,一半为白色。左上角图片的示意图如图三。代码示例如下,其中
whitecorner-ul.gif、whitecorner-ur.gif、whitecorner-ll.gif、whitecorner-lr.gif 为左上、
右上、左下、右下四幅图片。
实际上,在网页制做中,可以应用上述方法构造出各种各样的曲线图形,
使网页看起来线条流畅、生动活泼,达到功能性和观赏性的完美结合。
张庆 Email: zhangking@263.net 2000.12.10
|
|