在我的业余时间我尝试学习 javascript 和 jQuery。我通常在网站上进行实验。当页面上出现某些元素时，我想实现微弱的阴影效果。这给出了 -
我怎样才能使用 jQuery 来获得它。在某些地方，他们建议使用“图像精灵”。但我想避免为此使用图片，因为 -
另外，我听说 CSS3 内置了这种阴影效果。但是有不同的浏览器使用不同的版本。加上 IE* 浏览器占多数。我希望它适用于所有版本的 IE。我怎样才能在大多数浏览器中尽可能统一地获得这种效果。
【问题讨论】：
标签： javascript jquery css jquery-ui jquery-plugins
两年前有人有exact same question 就在另一周。选择的答案是 2007 年的 unmaintained drop shadow plugin，但您可能还想看看其他答案。
尽管这是一个见仁见智的问题，但我相信 CSS3 是您最好的选择，它为那些支持它的浏览器提供渐进式增强。这是CSS3, Please! 上显示的一组阴影属性示例：
.box_shadow {
-moz-box-shadow: 0px 0px 4px #333;
-webkit-box-shadow: 0px 0px 4px #333;
box-shadow: 0px 0px 4px #333;
}
【讨论】：
box-shadow 属性。对于早期版本的 IE，您需要使用神秘的 blur 过滤器。这大约是您可以获得的最接近的值：msdn.microsoft.com/en-us/library/ms532979(VS.85).aspx
我已经在我的博客上写了一篇关于如何创建 jQuery 投影效果的文章。你可以check it out here。该插件基本上在这些元素后面创建一个 div 以创建阴影效果。 See the demo of that old version here.
我现在修改了插件，它现在使用 CSS3 来为支持它的浏览器提供阴影效果，或者为不支持的浏览器使用相同的 div-based shadow .代码如下：
/**
* Drop Shadow Plugin jQuery
* http://sarfraznawaz.wordpress.com/
* Author: Sarfraz Ahmed (sarfraznawaz2005@gmail.com)
*/
(function($){
$.fn.dropshadow = function(settings){
// Extend default settings
var opts = $.extend({}, $.fn.dropshadow.defaults, settings);
// Check if CSS3 is supported
var style = $('div')[0].style;
var isCSS3 = style.MozBoxShadow !== undefined || style.WebkitBoxShadow !== undefined || style.BoxShadow !== undefined;
return this.each(function(settings){
var options = $.extend({}, opts, $(this).data());
var $this = $(this);
if (!isCSS3){
var styles = {
position: 'absolute',
width: $this.width() + 'px',
height: $this.height() + 'px',
backgroundColor: options.shadowColor,
zIndex: options.shadowLayer,
top: ($this.offset().top + parseInt(options.distance, 10)) + 'px',
left: ($this.offset().left + parseInt(options.distance, 10)) + 'px'
};
}
else{
var boxshadow = options.distance + ' ' + options.distance + ' ' + options.blur + ' ' + options.shadowColor;
var styles = {
position: 'absolute',
width: $this.width() + 'px',
height: $this.height() + 'px',
backgroundColor: options.shadowColor,
zIndex: options.shadowLayer,
top: $this.offset().top + 'px',
left: $this.offset().left + 'px',
MozBoxShadow:boxshadow,
WebkitBoxShadow:boxshadow,
BoxShadow:boxshadow
};
}
$('<div>').appendTo($('body')).css(styles);
});
}
// set default option values
$.fn.dropshadow.defaults = {
shadowColor: '#DFDFDF',
shadowLayer: -1,
distance:'5px',
blur:'3px'
}
})(jQuery);
这里是如何使用它：
$(window).load(function(){
$('.shadow').dropshadow({
shadowColor: '#cccccc',
shadowLayer: -100,
distance:'6px',
blur:'3px'
});
});
【讨论】：
【讨论】：