jQuery插件Round Shadow实现圆角和阴影（原理二）

2、css框模型实现圆角和阴影
a、原理
W3C对框模型的结构定义如图所示：



从图可以看出元素框的可见部分为padding和element两部分，margin的部分默认为透明，而且W3C中已说明背景部分由内容（element）和内边距（padding）组成，所以我们可以构造一张带有圆角和阴影的背景图片，将左边缘、中心、右边缘部分作为所装饰元素的背景，将图片的顶部（包括左上角、顶边、右上角）和底部（包括左下角、底边、右下角）作为元素节点的首个子节点和最后一个子节点，并且对顶部和底部进行相应的偏移，将其移动到所装饰节点的外边距（margin）部分，最后调整内容部分的内边距，即可实现较好的圆角和阴影效果了。
对背景图片的分割如图所示：



由于该方法的背景图片的宽度是固定的，所以所装饰元素的宽度也需要被修改成背景图片的宽度，以防止内容的溢出，这也是该方法的局限所在。
b、实现
了解了方法二的原理后，下面便是该方法的实现。
首先，在使用该方法前需要为其定义一个css类，如simple-round-shadow，该类可以为空，也可以添加其他限定所装饰元素样式的属性，然后定义三个类，分别为simple-round-shadow-top,simple-round-shadow-body,simple-round-shadow-bottom，其中simple-round-shadow即为所要传入到该方法中的参数prefix的值，在定义自己的样式时也需要定义如上的结构，在代码中将根据prefix为top，body，bottom构造css类为<prefix>-top,<prefix>-body,<prefix>-bottom。在top，body，bottom的三个类中必须为属性background-image赋值，即必须指定背景图片。默认的样式结构如下：

.simple-round-shadow {
	background-color: transparent;
}
.simple-round-shadow-top {
	/* background-image is necessary*/
	background: transparent url("images/simple/top.png") no-repeat;
}
.simple-round-shadow-body {
	/* background-image is necessary*/
	background: transparent url("images/simple/body.png") repeat-y;
}
.simple-round-shadow-bottom {
	/* background-image is necessary*/
	background: transparent url("images/simple/bottom.png") no-repeat;
}

为了避免使用者对背景的偏移等计算失误而导致结果差强人意，在代码中对背景图片的宽度和高度进行了自动获取，然后在依据高宽对所装饰元素的外边距和内边距进行计算，以达到较为满意的效果。以下为获取背景图片的高宽的函数：

/**
 * get the style's background-image's width and height
 * @param {String} className -- the css class's name
 * @return {Object{width,height}} the background image's width and height
 */
function getBgImgWH(className){
	var element = jQuery('<div class="'+className+'"></div>');
	var urlReg = /^url\("(.*)"\)$/;
	var image = new Image();
	var res = "";
	// in Opera and IE,the element must be add to document,
	// or you cann't get the css class's background-image's value
	jQuery(document.body).append(element.hide());
	res = urlReg.exec(element.css('background-image'));
	element.remove();
	if(res == null){
		return {width:0,height:0};
	} else {
		image.src = res[1];
		return {width:image.width,height:image.height};
	}
};

根据函数geBgImgWH获取到css类中背景图片的高宽：

var topImgWH = getBgImgWH(opt.prefix+"-top");
var bottomImgWH = getBgImgWH(opt.prefix+"-bottom");
var bodyImgWH = getBgImgWH(opt.prefix+"-body");

取顶部和底部背景图片高度中最小值作为所装饰元素的左右内边距偏移量：

var pRL = Math.min(topImgWH.height,bottomImgWH.height);

接着构造圆角和阴影的top，body，bottom部分：

var top = jQuery('<div class="'+opt.prefix+'-top"></div>');
var space = jQuery('<div class="'+opt.prefix+'-space"></div>');
var bottom = jQuery('<div class="'+opt.prefix+'-bottom"></div>');

然后对所装饰元素添加样式prefix和<prefix>-body，并修改其宽度为：躯干部背景图片的宽度-2*内边距偏移量，即bodyImgWH.width-2*pRL;元素的上下外边距在原来的基础上分别加上顶部和底部的高度，元素的左右内边距则在原来的基础上加上pRL。具体代码如下：

// add new css style to this element,and change the old background-color
// to avoid displaying motely at left and right edges,and change it's width
// to hold the background image
element.addClass(opt.prefix+" "+opt.prefix+"-body").css({
	'background-color' : 'transparent',
	'background-repeat' : 'repeat-y',
	'width' : (bodyImgWH.width-2*pRL)+"px",
	'margin-top' : (marginTop+topImgWH.height)+"px",
	'margin-bottom' : (marginBottom+bottomImgWH.height)+"px",
	'padding-left' : (paddingLeft+pRL)+"px",
	'padding-right' : (paddingRight+pRL)+"px"
});

下面接着将顶边top改为浮动框并为其设置高度和宽度，修改外边距，使其浮动到元素的边框外部，最后将其插入到元素的第一个节点位置。代码如下：

// modify the top's style to fit the element's margin and padding,
// and prepend it to the element
top.css({
	'float' : 'left',
	'height' : topImgWH.height+"px",
	'width' : topImgWH.width+"px",
	'margin' : "-"+topImgWH.height+"px 0px 0px -"+pRL+"px",
	'background-repeat' : 'no-repeat'
});
element.prepend(top);

为了防止使用该方法同时装饰父子节点时出现缺口，在元素的尾部添加了一个透明层，用来填补由于底部浮动造成的缺口。代码如下：

// modify the space's style and append it to the element
space.css({
	'height' : bottomImgWH.height+"px",
	'margin' : "-"+bottomImgWH.height+"px 0px 0px",
	'background-color' : 'transparent'
});
element.append(space);

最后将修改了外边距和浮动属性的底部bottom添加到所装饰元素的尾部，完成对该节点的装饰。代码如下：

// and append it to the element
bottom.css({
	'float' : 'left',
	'height' : bottomImgWH.height+"px",
	'width' : bottomImgWH.width+"px",
	'margin' : "0px 0px -"+bottomImgWH.height+"px -"+pRL+"px",
	'background-repeat' : 'no-repeat'
});
// add the round-shadow's bottom css style
element.append(bottom);

同时为了避免对已装饰元素重复装饰，在函数开始部分添加判断：

// one word cotain '-',so replace '-' to '_' for finding opt.prefix
var classReg = new RegExp("\\b"+opt.prefix.replace(/\-/g,'_')+"\\b");
// if the element has been roundShadowed,just return
if(classReg.test(element.attr('class').replace(/\-/g,'_'))){
	return;
}

与方法一一样，上面的方法只是针对一个元素进行装饰，要对jQuery包装集中元素进行装饰，则方法如下：

jQuery.fn.simpleRoundShadow = function(options){
	var opts = jQuery.extend({},jQuery.fn.simpleRoundShadow.defaults,options);
	return jQuery(this).each(function(){
		var panel = jQuery(this);
		var opt = jQuery.meta ? jQuery.extend({},opts,panel.data()) : opts;
		// wrap this panel's text node
				...;
		// add round-shadow effect
		simpleRoundShadow(panel,opt);
	});
};

c、效果截图
Opera11下效果：



FireFox3.6下效果：



IE7下效果：



上面IE与Oprea和FireFox的效果差异体现较为明显，原因是IE对元素框模型的定义与W3C标准有差异造成的，在该插件中没有对该差异进行处理。
3、css3实现圆角和阴影
该方法由于是使用了css3所支持的box-shadow特性，为元素添加box-shadow，border，border-radius属性即可轻松实现圆角和阴影效果，但是不同的浏览器对css3的支持效果有差异，并且IE暂不支持css3，所以采取了较为折中的实现。代码如下：

var direction = opt.shadowXOffset ? parseInt((1-Math.atan(opt.shadowYOffset/opt.shadowXOffset)/Math.PI)*180) : 90;
element.css({
	'padding' : opt.roundRadius,
	'box-shadow' : opt.shadowXOffset+'px '+opt.shadowYOffset+'px '+opt.shadowDepth+'px '+opt.shadowColor,
	'-moz-box-shadow' : opt.shadowXOffset+'px '+opt.shadowYOffset+'px '+opt.shadowDepth+'px '+opt.shadowColor,
	'-webkit-box-shadow' : opt.shadowXOffset+'px '+opt.shadowYOffset+'px '+opt.shadowDepth+'px '+opt.shadowColor,
	'filter' : 'progid:DXImageTransform.Microsoft.Shadow(Strength='+opt.shadowDepth+',Direction='+direction+',Color="'+opt.shadowColor+'")',
	'-ms-filter' : '"progid:DXImageTransform.Microsoft.Shadow(Strength='+opt.shadowDepth+',Direction='+direction+',Color="'+opt.shadowColor+'")"',
	'border' : opt.border,
	'-moz-border-radius' : opt.roundRadius,
	'-webkit-border-radius' : opt.roundRadius,
	'border-radius' : opt.roundRadius,
	'background-color' : backgroundColor
});

具体的css3 box-shadow实现圆角和阴影的细节，可参考：http://blog.imbolo.com/cross-browsers-css-shadow/
下面是该方案的效果截图：
Opera11下效果：



FireFox3.6下效果：



IE7下效果：



三、总结
以上三种方案只是可能的实现方式，并不代表终极实现，仅仅是提供一个思路，同时也从中学到了不少知识。当然该插件必然还存在很多问题，希望能在以后的使用中不断完善。

项目已放到Google Code上，可以下载：http://code.google.com/p/jquery-round-shadow/

jQuery插件Round Shadow实现圆角和阴影（原理一）
jQuery插件Round Shadow实现圆角和阴影（使用)