最近看到好多的网友献出的题材为梅或春的作品，我这里试着给配一个透明的边框，自以为显得更活泼，明快。

第一幅是《海外游客》的“蝶恋花”

--复制开始--

--复制结束--

第二幅是《咖啡豆》的“二月春风似剪刀”

--复制开始--

--复制结束--

它们的制作原理是分两层显示：上层是边框，下层是照片。这里的“层”在代码里用一个“表格”来实现。因此有两个表。表一是以照片作的衬底，表二是透明的边框（边框部分是半透明的，内部是全透明的）。

在老小孩的使用方法是：复制上面的图，放到编辑框里，点“源代码”，进入代码编辑状态。首先是替换照片地址，将表一里的照片地址换成自己的照片地址。其次是修改边框的尺寸。即改表二的宽 width="404"、高 height="305" 改成自己照片的尺寸。要注意的是，表一里的照片是以“背景”的形式存在的，因此这里的宽与高，是照片的实际大小.不能大照片上传，再将显示的尺寸改小。对表一的宽与高，理应设置，但是为了初学者的方便替换，就省了。在表二设置了边框的大小，会将表一撑到恰到好处。例一是白色的透明边框，例二是蓝色的透明边框，边框宽度均为15px。也可以将下述代码拷贝到编辑框的代码状态下，按中文的提示，将地址和数字逐一替换。

2017年记：这原是2008年写的博客，那时的主流浏览器是IE6，采用的是Microsoft专用的Alpha滤镜技术，但是，滤镜技术只适用于IE浏览器，对别的浏览器如360、火狐、safari、Chrome等都不兼容。即使IE浏览器，到了IE9以后也不兼容Alpha滤镜技术了。现在修改后的代码能在各主流浏览器上都能显示透明效果。

透明代码简介：（在style行内样式设置里）

filter: opacity:0.3; alpha (opacity=30); -moz-opacity:0.3;

其中

opacity:0.3;   适用于当前各主流浏览器   取值 0~1

filter: alpha (opacity=30);  适用于 低版本IE浏览器如IE4~IE9  取值 0~100

-moz-opacity:0.3; 适用于 低版本火狐浏览器   取值 0~1

将这三句代码一起写，就能使各主流浏览器都能产生透明效果。透明度现在是30%（100%为不透明，0为全透明）。代码里透明度的写法有用opacity=30的，有用opacity:0.3的，不要搞错。

border:15px solid #ffffff;

这是表table里的边框（boder）CSS样式设置。通常边框用border、borderColor属性设置边框的宽和颜色，这样设置的边框将在IE浏览器里显示成屋脊形，而且不同的浏览器显示不全相同。因此这个代码里选用了在各浏览器都兼容的边框样式设置。

boder:后面有三个设置值，分别是宽度（15px）、样式（solid）、颜色（#ffffff）。三个值中间用空格隔开。solid是实线边框，其他还有虚线、双线等，但是各浏览器的支持不仅相同，这里的实线边框（15px宽）就相当于平面边框了。第二个实例颜色设置成是蓝色（#0000ff）透明边框。