让IE6显示阴影
大家都知道,想让一个div显示有阴影效果,一般是加背景图片,这里提供了两个方法,不用加背景图片的方法,甚至让该死的IE6上也有效果,而且还是圆角的哦
方法一:
下载ie-css3.htc的文件,文本打开后,就是js代码,如下,可以拷贝粘贴保存:
- --Do not remove thisif you are using--
- Original Author: Remiz Rahnas
- Original Author URL: http://www.htmlremix.com
- Published date: 2008/09/24
- Changes by Nick Fetchak:
- - IE8 standards mode compatibility
- - VML elements now positioned behind original box rather than inside of it - should be less prone to breakage
- - Added partial support for'box-shadow' style
- - Checks for VML support before doing anything
- - Updates VML element size and position via timer and also via window resize event
- - lots of other small things
- Published date : 2010/03/14
- http://fetchak.com/ie-css3
- Thanks to TheBrightLines.com (http://www.thebrightlines.com/2009/12/03/using-ies-filter-in-a-cross-browser-way) for enlightening me about the DropShadow filter
- <public:attach event="ondocumentready" onevent="ondocumentready('v08vnSVo78t4JfjH')" />
- <script type="text/javascript">
- timer_length = 200; // Milliseconds
- border_opacity = false; // Use opacity on borders of rounded-corner elements? Note: This causes antialiasing issues
- // supportsVml() borrowed from http://stackoverflow.com/questions/654112/how-do-you-detect-support-for-vml-or-svg-in-a-browser
- function supportsVml() {
- if (typeof supportsVml.supported == "undefined") {
- var a = document.body.appendChild(document.createElement('div'));
- a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
- var b = a.firstChild;
- b.style.behavior = "url(#default#VML)";
- supportsVml.supported = b ? typeof b.adj == "object": true;
- a.parentNode.removeChild(a);
- }
- return supportsVml.supported
- }
- // findPos() borrowed from http://www.quirksmode.org/js/findpos.html
- function findPos(obj) {
- var curleft = curtop = 0;
- if (obj.offsetParent) {
- do {
- curleft += obj.offsetLeft;
- curtop += obj.offsetTop;
- } while (obj = obj.offsetParent);
- }
- return({
- 'x': curleft,
- 'y': curtop
- });
- }
- function createBoxShadow(element, vml_parent) {
- var style = element.currentStyle['iecss3-box-shadow'] || element.currentStyle['-moz-box-shadow'] || element.currentStyle['-webkit-box-shadow'] || element.currentStyle['box-shadow'] || '';
- var match = style.match(/^(\d+)px (\d+)px (\d+)px/);
- if (!match) { return(false); }
- var shadow = document.createElement('v:roundrect');
- shadow.userAttrs = {
- 'x': parseInt(RegExp.$1 || 0),
- 'y': parseInt(RegExp.$2 || 0),
- 'radius': parseInt(RegExp.$3 || 0) / 2
- };
- shadow.position_offset = {
- 'y': (0 - vml_parent.pos_ieCSS3.y - shadow.userAttrs.radius + shadow.userAttrs.y),
- 'x': (0 - vml_parent.pos_ieCSS3.x - shadow.userAttrs.radius + shadow.userAttrs.x)
- };
- shadow.size_offset = {
- 'width': 0,
- 'height': 0
- };
- shadow.arcsize = element.arcSize +'px';
- shadow.style.display = 'block';
- shadow.style.position = 'absolute';
- shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) +'px';
- shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) +'px';
- shadow.style.width = element.offsetWidth +'px';
- shadow.style.height = element.offsetHeight +'px';
- shadow.style.antialias = true;
- shadow.className = 'vml_box_shadow';
- shadow.style.zIndex = element.zIndex - 1;
- shadow.style.filter = 'progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=true,shadowOpacity='+ element.opacity +')';
- element.parentNode.appendChild(shadow);
- //element.parentNode.insertBefore(shadow, element.element);
- // For window resizing
- element.vml.push(shadow);
- return(true);
- }
- function createBorderRect(element, vml_parent) {
- if (isNaN(element.borderRadius)) { return(false); }
- element.style.background = 'transparent';
- element.style.borderColor = 'transparent';
- var rect = document.createElement('v:roundrect');
- rect.position_offset = {
- 'y': (0.5 * element.strokeWeight) - vml_parent.pos_ieCSS3.y,
- 'x': (0.5 * element.strokeWeight) - vml_parent.pos_ieCSS3.x
- };
- rect.size_offset = {
- 'width': 0 - element.strokeWeight,
- 'height': 0 - element.strokeWeight
- };
- rect.arcsize = element.arcSize +'px';
- rect.strokeColor = element.strokeColor;
- rect.strokeWeight = element.strokeWeight +'px';
- rect.stroked = element.stroked;
- rect.className = 'vml_border_radius';
- rect.style.display = 'block';
- rect.style.position = 'absolute';
- rect.style.top = (element.pos_ieCSS3.y + rect.position_offset.y) +'px';
- rect.style.left = (element.pos_ieCSS3.x + rect.position_offset.x) +'px';
- rect.style.width = (element.offsetWidth + rect.size_offset.width) +'px';
- rect.style.height = (element.offsetHeight + rect.size_offset.height) +'px';
- rect.style.antialias = true;
- rect.style.zIndex = element.zIndex - 1;
- if (border_opacity && (element.opacity < 1)) {
- rect.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity='+ parseFloat(element.opacity * 100) +')';
- }
- var fill = document.createElement('v:fill');
- fill.color = element.fillColor;
- fill.src = element.fillSrc;
- fill.className = 'vml_border_radius_fill';
- fill.type = 'tile';
- fill.opacity = element.opacity;
- // Hack: IE6 doesn't support transparent borders, use padding to offset original element
- isIE6 = /msie|MSIE 6/.test(navigator.userAgent);
- if (isIE6 && (element.strokeWeight > 0)) {
- element.style.borderStyle = 'none';
- element.style.paddingTop = parseInt(element.currentStyle.paddingTop || 0) + element.strokeWeight;
- element.style.paddingBottom = parseInt(element.currentStyle.paddingBottom || 0) + element.strokeWeight;
- }
- rect.appendChild(fill);
- element.parentNode.appendChild(rect);
- //element.parentNode.insertBefore(rect, element.element);
- // For window resizing
- element.vml.push(rect);
- return(true);
- }
- function createTextShadow(element, vml_parent) {
- if (!element.textShadow) { return(false); }
- var match = element.textShadow.match(/^(\d+)px (\d+)px (\d+)px (#?\w+)/);
- if (!match) { return(false); }
- //var shadow = document.createElement('span');
- var shadow = element.cloneNode(true);
- var radius = parseInt(RegExp.$3 || 0);
- shadow.userAttrs = {
- 'x': parseInt(RegExp.$1 || 0) - (radius),
- 'y': parseInt(RegExp.$2 || 0) - (radius),
- 'radius': radius / 2,
- 'color': (RegExp.$4 || '#000')
- };
- shadow.position_offset = {
- 'y': (0 - vml_parent.pos_ieCSS3.y + shadow.userAttrs.y),
- 'x': (0 - vml_parent.pos_ieCSS3.x + shadow.userAttrs.x)
- };
- shadow.size_offset = {
- 'width': 0,
- 'height': 0
- };
- shadow.style.color = shadow.userAttrs.color;
- shadow.style.position = 'absolute';
- shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) +'px';
- shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) +'px';
- shadow.style.antialias = true;
- shadow.style.behavior = null;
- shadow.className = 'ieCSS3_text_shadow';
- shadow.innerHTML = element.innerHTML;
- // For some reason it only looks right with opacity at 75%
- shadow.style.filter = '\
- progid:DXImageTransform.Microsoft.Alpha(Opacity=75)\
- progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=false,shadowOpacity=100)\
- ';
- var clone = element.cloneNode(true);
- clone.position_offset = {
- 'y': (0 - vml_parent.pos_ieCSS3.y),
- 'x': (0 - vml_parent.pos_ieCSS3.x)
- };
- clone.size_offset = {
- 'width': 0,
- 'height': 0
- };
- clone.style.behavior = null;
- clone.style.position = 'absolute';
- clone.style.top = (element.pos_ieCSS3.y + clone.position_offset.y) +'px';
- clone.style.left = (element.pos_ieCSS3.x + clone.position_offset.x) +'px';
- clone.className = 'ieCSS3_text_shadow';
- element.parentNode.appendChild(shadow);
- element.parentNode.appendChild(clone);
- element.style.visibility = 'hidden';
- // For window resizing
- element.vml.push(clone);
- element.vml.push(shadow);
- return(true);
- }
- function ondocumentready(classID) {
- if (!supportsVml()) { return(false); }
- if (this.className.match(classID)) { return(false); }
- this.className = this.className.concat(' ', classID);
- // Add a namespace for VML (IE8 requires it)
- if (!document.namespaces.v) { document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); }
- // Check to see if we've run once before on this page
- if (typeof(window.ieCSS3) == 'undefined') {
- // Create global ieCSS3 object
- window.ieCSS3 = {
- 'vmlified_elements': new Array(),
- 'update_timer': setInterval(updatePositionAndSize, timer_length)
- };
- if (typeof(window.onresize) == 'function') { window.ieCSS3.previous_onresize = window.onresize; }
- // Attach window resize event
- window.onresize = updatePositionAndSize;
- }
- // These attrs are for the script and have no meaning to the browser:
- this.borderRadius = parseInt(this.currentStyle['iecss3-border-radius'] ||
- this.currentStyle['-moz-border-radius'] ||
- this.currentStyle['-webkit-border-radius'] ||
- this.currentStyle['border-radius'] ||
- this.currentStyle['-khtml-border-radius']);
- this.arcSize = Math.min(this.borderRadius / Math.min(this.offsetWidth, this.offsetHeight), 1);
- this.fillColor = this.currentStyle.backgroundColor;
- this.fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1');
- this.strokeColor = this.currentStyle.borderColor;
- this.strokeWeight = parseInt(this.currentStyle.borderWidth);
- this.stroked = 'true';
- if (isNaN(this.strokeWeight) || (this.strokeWeight == 0)) {
- this.strokeWeight = 0;
- this.strokeColor = fillColor;
- this.stroked = 'false';
- }
- this.opacity = parseFloat(this.currentStyle.opacity || 1);
- this.textShadow = this.currentStyle['text-shadow'];
- this.element.vml = new Array();
- this.zIndex = parseInt(this.currentStyle.zIndex);
- if (isNaN(this.zIndex)) { this.zIndex = 0; }
- // Find which element provides position:relative for the target element (default to BODY)
- vml_parent = this;
- var limit = 100, i = 0;
- do {
- vml_parent = vml_parent.parentElement;
- i++;
- if (i >= limit) { return(false); }
- } while ((typeof(vml_parent) != 'undefined') && (vml_parent.currentStyle.position != 'relative') && (vml_parent.tagName != 'BODY'));
- vml_parent.pos_ieCSS3 = findPos(vml_parent);
- this.pos_ieCSS3 = findPos(this);
- var rv1 = createBoxShadow(this, vml_parent);
- var rv2 = createBorderRect(this, vml_parent);
- var rv3 = createTextShadow(this, vml_parent);
- if (rv1 || rv2 || rv3) { window.ieCSS3.vmlified_elements.push(this.element); }
- if (typeof(vml_parent.document.ieCSS3_stylesheet) == 'undefined') {
- vml_parent.document.ieCSS3_stylesheet = vml_parent.document.createStyleSheet();
- vml_parent.document.ieCSS3_stylesheet.addRule("v\\:roundrect", "behavior: url(#default#VML)");
- vml_parent.document.ieCSS3_stylesheet.addRule("v\\:fill", "behavior: url(#default#VML)");
- // Compatibility with IE7.js
- vml_parent.document.ieCSS3_stylesheet.ie7 = true;
- }
- }
- function updatePositionAndSize() {
- if (typeof(window.ieCSS3.vmlified_elements) != 'object') { return(false); }
- for (var i in window.ieCSS3.vmlified_elements) {
- var el = window.ieCSS3.vmlified_elements[i];
- if (typeof(el.vml) != 'object') { continue; }
- for (var z in el.vml) {
- //var parent_pos = findPos(el.vml[z].parentNode);
- var new_pos = findPos(el);
- new_pos.x = (new_pos.x + el.vml[z].position_offset.x) + 'px';
- new_pos.y = (new_pos.y + el.vml[z].position_offset.y) + 'px';
- if (el.vml[z].style.left != new_pos.x) { el.vml[z].style.left = new_pos.x; }
- if (el.vml[z].style.top != new_pos.y) { el.vml[z].style.top = new_pos.y; }
- var new_size = {
- 'width': parseInt(el.offsetWidth + el.vml[z].size_offset.width),
- 'height': parseInt(el.offsetHeight + el.vml[z].size_offset.height)
- }
- if (el.vml[z].offsetWidth != new_size.width) { el.vml[z].style.width = new_size.width +'px'; }
- if (el.vml[z].offsetHeight != new_size.height) { el.vml[z].style.height = new_size.height +'px'; }
- }
- }
- if (event && (event.type == 'resize') && typeof(window.ieCSS3.previous_onresize) == 'function') { window.ieCSS3.previous_onresize(); }
- }
- </script>
--Do not remove this if you are using-- Original Author: Remiz Rahnas Original Author URL: http://www.htmlremix.com Published date: 2008/09/24 Changes by Nick Fetchak: - IE8 standards mode compatibility - VML elements now positioned behind original box rather than inside of it - should be less prone to breakage - Added partial support for 'box-shadow' style - Checks for VML support before doing anything - Updates VML element size and position via timer and also via window resize event - lots of other small things Published date : 2010/03/14 http://fetchak.com/ie-css3 Thanks to TheBrightLines.com (http://www.thebrightlines.com/2009/12/03/using-ies-filter-in-a-cross-browser-way) for enlightening me about the DropShadow filter <public:attach event="ondocumentready" onevent="ondocumentready('v08vnSVo78t4JfjH')" /> <script type="text/javascript"> timer_length = 200; // Milliseconds border_opacity = false; // Use opacity on borders of rounded-corner elements? Note: This causes antialiasing issues // supportsVml() borrowed from http://stackoverflow.com/questions/654112/how-do-you-detect-support-for-vml-or-svg-in-a-browser function supportsVml() { if (typeof supportsVml.supported == "undefined") { var a = document.body.appendChild(document.createElement('div')); a.innerHTML = '<v:shape id="vml_flag1" adj="1" />'; var b = a.firstChild; b.style.behavior = "url(#default#VML)"; supportsVml.supported = b ? typeof b.adj == "object": true; a.parentNode.removeChild(a); } return supportsVml.supported } // findPos() borrowed from http://www.quirksmode.org/js/findpos.html function findPos(obj) { var curleft = curtop = 0; if (obj.offsetParent) { do { curleft += obj.offsetLeft; curtop += obj.offsetTop; } while (obj = obj.offsetParent); } return({ 'x': curleft, 'y': curtop }); } function createBoxShadow(element, vml_parent) { var style = element.currentStyle['iecss3-box-shadow'] || element.currentStyle['-moz-box-shadow'] || element.currentStyle['-webkit-box-shadow'] || element.currentStyle['box-shadow'] || ''; var match = style.match(/^(\d+)px (\d+)px (\d+)px/); if (!match) { return(false); } var shadow = document.createElement('v:roundrect'); shadow.userAttrs = { 'x': parseInt(RegExp.$1 || 0), 'y': parseInt(RegExp.$2 || 0), 'radius': parseInt(RegExp.$3 || 0) / 2 }; shadow.position_offset = { 'y': (0 - vml_parent.pos_ieCSS3.y - shadow.userAttrs.radius + shadow.userAttrs.y), 'x': (0 - vml_parent.pos_ieCSS3.x - shadow.userAttrs.radius + shadow.userAttrs.x) }; shadow.size_offset = { 'width': 0, 'height': 0 }; shadow.arcsize = element.arcSize +'px'; shadow.style.display = 'block'; shadow.style.position = 'absolute'; shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) +'px'; shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) +'px'; shadow.style.width = element.offsetWidth +'px'; shadow.style.height = element.offsetHeight +'px'; shadow.style.antialias = true; shadow.className = 'vml_box_shadow'; shadow.style.zIndex = element.zIndex - 1; shadow.style.filter = 'progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=true,shadowOpacity='+ element.opacity +')'; element.parentNode.appendChild(shadow); //element.parentNode.insertBefore(shadow, element.element); // For window resizing element.vml.push(shadow); return(true); } function createBorderRect(element, vml_parent) { if (isNaN(element.borderRadius)) { return(false); } element.style.background = 'transparent'; element.style.borderColor = 'transparent'; var rect = document.createElement('v:roundrect'); rect.position_offset = { 'y': (0.5 * element.strokeWeight) - vml_parent.pos_ieCSS3.y, 'x': (0.5 * element.strokeWeight) - vml_parent.pos_ieCSS3.x }; rect.size_offset = { 'width': 0 - element.strokeWeight, 'height': 0 - element.strokeWeight }; rect.arcsize = element.arcSize +'px'; rect.strokeColor = element.strokeColor; rect.strokeWeight = element.strokeWeight +'px'; rect.stroked = element.stroked; rect.className = 'vml_border_radius'; rect.style.display = 'block'; rect.style.position = 'absolute'; rect.style.top = (element.pos_ieCSS3.y + rect.position_offset.y) +'px'; rect.style.left = (element.pos_ieCSS3.x + rect.position_offset.x) +'px'; rect.style.width = (element.offsetWidth + rect.size_offset.width) +'px'; rect.style.height = (element.offsetHeight + rect.size_offset.height) +'px'; rect.style.antialias = true; rect.style.zIndex = element.zIndex - 1; if (border_opacity && (element.opacity < 1)) { rect.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity='+ parseFloat(element.opacity * 100) +')'; } var fill = document.createElement('v:fill'); fill.color = element.fillColor; fill.src = element.fillSrc; fill.className = 'vml_border_radius_fill'; fill.type = 'tile'; fill.opacity = element.opacity; // Hack: IE6 doesn't support transparent borders, use padding to offset original element isIE6 = /msie|MSIE 6/.test(navigator.userAgent); if (isIE6 && (element.strokeWeight > 0)) { element.style.borderStyle = 'none'; element.style.paddingTop = parseInt(element.currentStyle.paddingTop || 0) + element.strokeWeight; element.style.paddingBottom = parseInt(element.currentStyle.paddingBottom || 0) + element.strokeWeight; } rect.appendChild(fill); element.parentNode.appendChild(rect); //element.parentNode.insertBefore(rect, element.element); // For window resizing element.vml.push(rect); return(true); } function createTextShadow(element, vml_parent) { if (!element.textShadow) { return(false); } var match = element.textShadow.match(/^(\d+)px (\d+)px (\d+)px (#?\w+)/); if (!match) { return(false); } //var shadow = document.createElement('span'); var shadow = element.cloneNode(true); var radius = parseInt(RegExp.$3 || 0); shadow.userAttrs = { 'x': parseInt(RegExp.$1 || 0) - (radius), 'y': parseInt(RegExp.$2 || 0) - (radius), 'radius': radius / 2, 'color': (RegExp.$4 || '#000') }; shadow.position_offset = { 'y': (0 - vml_parent.pos_ieCSS3.y + shadow.userAttrs.y), 'x': (0 - vml_parent.pos_ieCSS3.x + shadow.userAttrs.x) }; shadow.size_offset = { 'width': 0, 'height': 0 }; shadow.style.color = shadow.userAttrs.color; shadow.style.position = 'absolute'; shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) +'px'; shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) +'px'; shadow.style.antialias = true; shadow.style.behavior = null; shadow.className = 'ieCSS3_text_shadow'; shadow.innerHTML = element.innerHTML; // For some reason it only looks right with opacity at 75% shadow.style.filter = '\ progid:DXImageTransform.Microsoft.Alpha(Opacity=75)\ progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=false,shadowOpacity=100)\ '; var clone = element.cloneNode(true); clone.position_offset = { 'y': (0 - vml_parent.pos_ieCSS3.y), 'x': (0 - vml_parent.pos_ieCSS3.x) }; clone.size_offset = { 'width': 0, 'height': 0 }; clone.style.behavior = null; clone.style.position = 'absolute'; clone.style.top = (element.pos_ieCSS3.y + clone.position_offset.y) +'px'; clone.style.left = (element.pos_ieCSS3.x + clone.position_offset.x) +'px'; clone.className = 'ieCSS3_text_shadow'; element.parentNode.appendChild(shadow); element.parentNode.appendChild(clone); element.style.visibility = 'hidden'; // For window resizing element.vml.push(clone); element.vml.push(shadow); return(true); } function ondocumentready(classID) { if (!supportsVml()) { return(false); } if (this.className.match(classID)) { return(false); } this.className = this.className.concat(' ', classID); // Add a namespace for VML (IE8 requires it) if (!document.namespaces.v) { document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); } // Check to see if we've run once before on this page if (typeof(window.ieCSS3) == 'undefined') { // Create global ieCSS3 object window.ieCSS3 = { 'vmlified_elements': new Array(), 'update_timer': setInterval(updatePositionAndSize, timer_length) }; if (typeof(window.onresize) == 'function') { window.ieCSS3.previous_onresize = window.onresize; } // Attach window resize event window.onresize = updatePositionAndSize; } // These attrs are for the script and have no meaning to the browser: this.borderRadius = parseInt(this.currentStyle['iecss3-border-radius'] || this.currentStyle['-moz-border-radius'] || this.currentStyle['-webkit-border-radius'] || this.currentStyle['border-radius'] || this.currentStyle['-khtml-border-radius']); this.arcSize = Math.min(this.borderRadius / Math.min(this.offsetWidth, this.offsetHeight), 1); this.fillColor = this.currentStyle.backgroundColor; this.fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1'); this.strokeColor = this.currentStyle.borderColor; this.strokeWeight = parseInt(this.currentStyle.borderWidth); this.stroked = 'true'; if (isNaN(this.strokeWeight) || (this.strokeWeight == 0)) { this.strokeWeight = 0; this.strokeColor = fillColor; this.stroked = 'false'; } this.opacity = parseFloat(this.currentStyle.opacity || 1); this.textShadow = this.currentStyle['text-shadow']; this.element.vml = new Array(); this.zIndex = parseInt(this.currentStyle.zIndex); if (isNaN(this.zIndex)) { this.zIndex = 0; } // Find which element provides position:relative for the target element (default to BODY) vml_parent = this; var limit = 100, i = 0; do { vml_parent = vml_parent.parentElement; i++; if (i >= limit) { return(false); } } while ((typeof(vml_parent) != 'undefined') && (vml_parent.currentStyle.position != 'relative') && (vml_parent.tagName != 'BODY')); vml_parent.pos_ieCSS3 = findPos(vml_parent); this.pos_ieCSS3 = findPos(this); var rv1 = createBoxShadow(this, vml_parent); var rv2 = createBorderRect(this, vml_parent); var rv3 = createTextShadow(this, vml_parent); if (rv1 || rv2 || rv3) { window.ieCSS3.vmlified_elements.push(this.element); } if (typeof(vml_parent.document.ieCSS3_stylesheet) == 'undefined') { vml_parent.document.ieCSS3_stylesheet = vml_parent.document.createStyleSheet(); vml_parent.document.ieCSS3_stylesheet.addRule("v\\:roundrect", "behavior: url(#default#VML)"); vml_parent.document.ieCSS3_stylesheet.addRule("v\\:fill", "behavior: url(#default#VML)"); // Compatibility with IE7.js vml_parent.document.ieCSS3_stylesheet.ie7 = true; } } function updatePositionAndSize() { if (typeof(window.ieCSS3.vmlified_elements) != 'object') { return(false); } for (var i in window.ieCSS3.vmlified_elements) { var el = window.ieCSS3.vmlified_elements[i]; if (typeof(el.vml) != 'object') { continue; } for (var z in el.vml) { //var parent_pos = findPos(el.vml[z].parentNode); var new_pos = findPos(el); new_pos.x = (new_pos.x + el.vml[z].position_offset.x) + 'px'; new_pos.y = (new_pos.y + el.vml[z].position_offset.y) + 'px'; if (el.vml[z].style.left != new_pos.x) { el.vml[z].style.left = new_pos.x; } if (el.vml[z].style.top != new_pos.y) { el.vml[z].style.top = new_pos.y; } var new_size = { 'width': parseInt(el.offsetWidth + el.vml[z].size_offset.width), 'height': parseInt(el.offsetHeight + el.vml[z].size_offset.height) } if (el.vml[z].offsetWidth != new_size.width) { el.vml[z].style.width = new_size.width +'px'; } if (el.vml[z].offsetHeight != new_size.height) { el.vml[z].style.height = new_size.height +'px'; } } } if (event && (event.type == 'resize') && typeof(window.ieCSS3.previous_onresize) == 'function') { window.ieCSS3.previous_onresize(); } } </script>然后在页面中引入这个文件,当css文件引入,再定义一个class
- .box
- {
- -moz-border-radius: 15px; /* Firefox */
- -webkit-border-radius: 15px; /* Safari and Chrome */
- border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
- -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
- -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
- box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
- behavior: url(ie-css3.htc);
- }
.box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari and Chrome */ border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */ box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */ behavior: url(ie-css3.htc); }然后在div中的class属性中加入box,再设置长宽就可以看到阴影效果
html代码如下:
- <html>
- <head>
- <linkhref="ie-css3.htc"rel="stylesheet"type="text/css"/>
- <styletype="text/css">
- .box
- {
- -moz-border-radius: 15px; /* Firefox */
- -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
- border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
- -webkit-border-radius: 15px; /* Safari and Chrome */
- -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
- box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
- behavior: url(ie-css3.htc);
- }
- </style>
- </head>
- <body>
- <divclass="box"style="width: 200px; height: 200px;">
- </div>
- </body>
- </html>
<html> <head> <link href="ie-css3.htc" rel="stylesheet" type="text/css" /> <style type="text/css"> .box { -moz-border-radius: 15px; /* Firefox */ -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ -webkit-border-radius: 15px; /* Safari and Chrome */ -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */ box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */ behavior: url(ie-css3.htc); } </style> </head> <body> <div class="box" style="width: 200px; height: 200px;"> </div> </body> </html>
但ie6中显示背景是黑色,可以通过添加background-color:white;属性来让背景色为白色。
而且IE中阴影色只是黑色,不管你设置成什么颜色
方法二:只适用于IE浏览器
纯css控制
- <html>
- <head>
- <styletype="text/css">
- .img
- {
- background: #fff;
- -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6)
- progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10) progid:DXImageTransform.Microsoft.Shadow
- (color=#dddddd,direction=180,strength=10) progid:DXImageTransform.Microsoft.Shadow (color=#eeeeee,direction=270,strength=6)";
- *filter:
- progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6)
- progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10)
- progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10)
- progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6);
- }
- </style>
- </head>
- <body>
- <divclass="img"style="width: 200px; height: 200px;">
- </div>
- </body>
- </html>
<html> <head> <style type="text/css"> .img { background: #fff; -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10) progid:DXImageTransform.Microsoft.Shadow (color=#dddddd,direction=180,strength=10) progid:DXImageTransform.Microsoft.Shadow (color=#eeeeee,direction=270,strength=6)"; *filter: progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6); } </style> </head> <body> <div class="img" style="width: 200px; height: 200px;"> </div> </body> </html>其中,color是颜色,direction是顺时针偏转的角度,strength是阴影的大小