CSS3 应用01 - 文本阴影效果（兼容IE 7-9 Firefox Opera Chrome 等多浏览器）
郑重声明，如果引用，请注明出处：（原创 博客园：天之子）
CSS3 提供一个文本阴影属性：text-shadow : color || length || lenth|| opacity
其中，第一个参数是颜色，第二个参数是阴影的水平延伸距离，第三个参数是阴影的垂直延伸距离，第四个参数是模糊效果的作用距离。支持设定多组效果。
例如：text-shadow: #333333 4px 5px 6px;
可是，IE 6-9 都不支持文本阴影的属性，只能使用 filter: glow / blur / shadow / dropshadow。。。来模拟文本阴影效果。
那么，我们难道就没有办法了吗？答案是可以的。
下面介绍几种办法：
如果你对日本人非常敏感，请只看第一种方法！这里只谈技术，不含民族情感。
1）多重文本阴影
实现原理：添加两个相同文本的 span，其中一个文本显示文本，一个作为阴影文本。
显示代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title></title>
6 <style type="text/css">
7 body
8 {
9 background-color: #cccccc;
10 }
11 h1
12 {
13 color: #ff9900;
14 font-family: 微软雅黑, 黑体;
15 font-size: 48pt !important;
16 font-weight: bold;
17 text-shadow: #fbfcfd 4px 4px 4px;
18 padding-bottom: 2px;
19 }
20 .ielte9 > h1 > span
21 {
22 position: absolute;
23 color: #ff9900;
24 }
25 .ielte9 > h1 > span.shadow
26 {
27 display: inline-block;
28 zoom: 1;
29 color: #fbfcfd;
30 filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=4);
31 }
32 </style>
33 </head>
34 <body>
35 <!--[if lte IE 9 ]><div class="ielte9"><h1><span class="shadow">基本业务框架系统</span><span>基本业务框架系统</span></h1></div><![endif]-->
36 <!--[if (gt IE 9)|!(IE)]><!--><div><h1><span>基本业务框架系统</span></h1></div><!--![endif]-->
37 </body>
38 </html>
< !--[if IE]> 表示判断是否IE浏览器，<![endif]--> 表示条件结束
非IE浏览器，多添加一个开始标志：<!-->，结束使用：<!--![endif]-->
<!--[if lte IE 9 ]> 表示 IE 浏览器版本 ≤ 9.0，<!--[if (gt IE 9)|!(IE)]> 表示 IE 浏览器版本 > 9.0 或者 非IE浏览器
lte - 不高于，lt - 小于，gt - 大于，gte - 不低于
实现评价：性能最好，有些重复文本块，如果页面有很多需要显示阴影的文本块，那么建议使用这种方法。
2）JS 文本阴影
实现原理：使用一个 span，用 JS 代码动态显示文本阴影效果。
显示代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title></title>
6 <style type="text/css">
7 body
8 {
9 background-color: #cccccc;
10 }
11 h1
12 {
13 color: #ff9900;
14 font-family: 微软雅黑, 黑体;
15 font-size: 48pt !important;
16 font-weight: bold;
17 text-shadow: #fbfcfd 4px 4px 4px;
18 padding-bottom: 2px;
19 }
20 </style>
21 <script src="textshadow.js" type="text/javascript"></script>
22 <script type="text/javascript">
23 var ieShadowSettings = function () {
24 return isMSIE ? [
25 { sel: 'h1', shadow: '4px 4px 4px #fbfcfd' }
26 ] : null;
27 };
28 </script>
29 </head>
30 <body>
31 <h1>基本业务框架系统文本阴影测试（兼容 IE 7-9版本）</h1>
32 </body>
33 </html>
特别提示： 如果 shadow: '#fbfcfd 4px 4px 4px'，运行没问题，自动会忽略 #fbfcfd，文本阴影颜色 = 字体的颜色！
其中，引用了日本人编写的一个文本阴影类库：textshadow.js
/*
text-shadow for MSIE
http://asamuzak.jp
*/
var ieShadowSettings = function () {
return isMSIE ? [
// ここ（return [];内）にtext-shadowを適用させるセレクタの配列を記述
// セレクタ毎に「カンマ区切り」で配列を追加（カンマを忘れるとエラー発生）
// Write your text-shadow settings here, like below.
// { sel : 'h1', shadow : '2px 2px 2px gray' },
// { sel : 'em', shadow : '1px 1px 1px rgb(0, 100, 100)' }
] : null;
};
var isMSIE = /*@cc_on!@*/false;
var ieVersion = (function (reg) { return isMSIE && navigator.userAgent.match(reg) ? RegExp.$1 * 1 : null; })(/MSIE\s([0-9]+[\.0-9]*)/);
function addEvent(target, type, listener) {
target.addEventListener ? target.addEventListener(type, listener, false) :
target.attachEvent ? target.attachEvent('on' + type, function () { listener.call(target, window.event) }) :
target['on' + type] = function (e) { listener.call(target, e || window.event) };
};
function getCompStyle(elm) {
return isMSIE && ieVersion < 9 ? elm.currentStyle : document.defaultView.getComputedStyle(elm, '');
};
function getPrevSibling(pElm) {
return pElm.nodeType == 1 ? pElm : (pElm = pElm.previousSibling, pElm != null ? getPrevSibling(pElm) : null);
};
function getGeneralObj(pElm) {
var arr = [];
for ((pElm = pElm.previousSibling) && pElm.nodeType == 1 && (arr[arr.length] = pElm); pElm != null; ) {
(pElm = pElm.previousSibling) && pElm.nodeType == 1 && (arr[arr.length] = pElm);
}
return arr;
};
function getAncestObj(pElm) {
var arr = [];
if (pElm = pElm.parentNode) {
for (arr[arr.length] = pElm; pElm.nodeName.toLowerCase() != "body"; ) {
(pElm = pElm.parentNode) && (arr[arr.length] = pElm);
}
}
return arr;
};
function convPercentTo256(cProf) {
if (cProf.match(/(rgba?)\(\s*([0-9\.]+%?\s*,\s*[0-9\.]+%?\s*,\s*[0-9\.]+%?)\s*(,\s*[01]?[\.0-9]*)?\s*\)/)) {
for (var cType = RegExp.$1, arr = RegExp.$2.split(/,/), aCh = (RegExp.$3 || ''), rgbArr = [], i = 0, l = arr.length; i < l; i++) {
arr[i].match(/([0-9\.]+)%/) && (arr[i] = Math.round(RegExp.$1 * 255 / 100));
rgbArr[rgbArr.length] = arr[i];
}
return cType + '(' + rgbArr.join(',') + aCh + ')';
}
};
function convUnitToPx(sUnit, obj) {
var getUnitRatio = function (sUnit) {
var elm, val, dId = cNum(), dBox = document.createElement('div'), dBody = document.getElementsByTagName('body')[0];
dBox.id = 'dummyDiv' + dId; dId++;
dBox.style.width = sUnit;
dBox.style.height = 0;
dBox.style.visibility = 'hidden';
dBody.appendChild(dBox);
elm = document.getElementById(dBox.id);
val = Math.abs(elm.getBoundingClientRect().right - elm.getBoundingClientRect().left);
dBody.removeChild(elm);
return val;
};
if (sUnit.match(/^0(em|ex|px|cm|mm|in|pt|pc)?$/)) {
return 0;
}
else if (sUnit.match(/^(\-?[0-9\.]+)px$/)) {
return RegExp.$1 * 1;
}
else if (sUnit.match(/^(\-?[0-9\.]+)(cm|mm|in|pt|pc)$/)) {
return RegExp.$1 * 1 >= 0 ? getUnitRatio(sUnit) : getUnitRatio((RegExp.$1 * -1) + RegExp.$2) * -1;
}
else if (sUnit.match(/^(\-?[0-9\.]+)(em|ex)$/)) {
var val = (getUnitRatio(sUnit) / getUnitRatio('1em')), arr = getAncestObj(obj), dRoot = document.getElementsByTagName('html')[0], fSize = [];
arr.unshift(obj); arr[arr.length] = dRoot;
for (var i = 0, l = arr.length; i < l; i++) {
fSize[fSize.length] = getCompStyle(arr[i]).fontSize;
}
for (i = 0, l = fSize.length; i < l; i++) {
if (fSize[i].match(/^([0-9\.]+)%$/)) {
val *= (RegExp.$1 / 100);
}
else if (fSize[i].match(/^[0-9\.]+(em|ex)$/)) {
val *= (getUnitRatio(fSize[i]) / getUnitRatio('1em'));
}
else if (fSize[i].match(/^smaller$/)) {
val /= 1.2;
}
else if (fSize[i].match(/^larger$/)) {
val *= 1.2;
}
else if (fSize[i].match(/^([0-9\.]+)(px|cm|mm|in|pt|pc)$/)) {
val *= getUnitRatio(fSize[i]);
break;
}
else if (fSize[i].match(/^xx\-small$/)) {
val *= (getUnitRatio(getCompStyle(dRoot).fontSize) / 1.728);
break;
}
else if (fSize[i].match(/^x\-small$/)) {
val *= (getUnitRatio(getCompStyle(dRoot).fontSize) / 1.44);
break;
}
else if (fSize[i].match(/^small$/)) {
val *= (getUnitRatio(getCompStyle(dRoot).fontSize) / 1.2);
break;
}
else if (fSize[i].match(/^medium$/)) {
val *= getUnitRatio(getCompStyle(dRoot).fontSize);
break;
}
else if (fSize[i].match(/^large$/)) {
val *= (getUnitRatio(getCompStyle(dRoot).fontSize) * 1.2);
break;
}
else if (fSize[i].match(/^x\-large$/)) {
val *= (getUnitRatio(getCompStyle(dRoot).fontSize) * 1.44);
break;
}
else if (fSize[i].match(/^xx\-large$/)) {
val *= (getUnitRatio(getCompStyle(dRoot).fontSize) * 1.728);
break;
}
else if (fSize[i].match(/^([0-9\.]+)([a-z]+)/)) {
val *= getUnitRatio(fSize[i]);
break;
}
else {
break;
}
}
return Math.round(val);
}
};
function removeDupFunc(fStr) {
for (var arr = fStr.replace(/\s+/, '').split(/;/), fArr = [], bool, i = 0, l = arr.length; i < l; i++) {
bool = true;
for (var j = i; j < l; j++) {
i != j && arr[i] == arr[j] && (bool = false);
}
bool && arr[i] != '' && (fArr[fArr.length] = arr[i]);
}
return fArr.join(';') + ';';
};
var revArr = function (arr) {
for (var rArr = [], i = 0, l = arr.length; i < l; i++) {
rArr.unshift(arr[i]);
}
return rArr;
};
var cNum = (function (n) { return function () { return n++; } })(0);
function showElm(eId) {
eId.style.visibility = 'visible';
};
function hideElm(eId) {
eId.style.visibility = 'hidden';
};
function textShadowForMSIE() {
var setShadow = function (tObj) {
var setShadowNodeColor = function (elm) {
for (var arr = elm.childNodes, i = 0, l = arr.length; i < l; i++) {
if (arr[i].nodeType == 1) {
!arr[i].hasChildNodes() ? arr[i].style.visibility = 'hidden' : (arr[i].style.color = elm.style.color, setShadowNodeColor(arr[i]));
}
}
};
var hideAncestShadow = function (oElm, pElm) {
for (var arr = pElm.childNodes, i = 0, l = arr.length; i < l; i++) {
if (arr[i].hasChildNodes()) {
arr[i].nodeName.toLowerCase() == oElm.tagName.toLowerCase() && arr[i].firstChild == oElm.firstChild ? arr[i].style.visibility = 'hidden' : hideAncestShadow(oElm, arr[i]);
}
}
};
var boolShadowChild = function (elm) {
for (var bool = true, arr = getAncestObj(elm), i = 0, l = arr.length; i < l; i++) {
if (arr[i].tagName.toLowerCase() == 'span' && arr[i].className.match(/dummyShadow/)) {
bool = false;
break;
}
}
return bool;
};
if (tObj.shadow != 'invalid') {
for (var arr = [], nArr = tObj.elm.childNodes, bool = false, i = 0, l = nArr.length; i < l; i++) {
if (nArr[i].nodeName.toLowerCase() == 'span' && nArr[i].className.match(/dummyShadow/)) {
nArr[i].className.match(/hasImp/) && (bool = true);
arr[arr.length] = nArr[i].id;
}
}
if (bool == false || tObj.hasImp == true) {
var mOver = tObj.elm.getAttribute('onmouseover') || '';
var mOut = tObj.elm.getAttribute('onmouseout') || '';
mOver != '' && !mOver.match(/;$/) && (mOver += ';');
mOut != '' && !mOut.match(/;$/) && (mOut += ';');
for (i = 0, l = arr.length; i < l; i++) {
if (tObj.ePseudo == 'hover' && tObj.shadow == 'none') {
mOver += 'hideElm(' + arr[i] + ');';
mOut += 'showElm(' + arr[i] + ');';
}
else if (!(tObj.ePseudo == 'hover' && tObj.shadow != 'none')) {
tObj.elm.removeChild(document.getElementById(arr[i]));
}
}
tObj.ePseudo == 'hover' && tObj.shadow == 'none' && (tObj.elm.setAttribute('onmouseover', mOver), tObj.elm.setAttribute('onmouseout', mOut));
for (var aBg, arr = getAncestObj(tObj.elm), i = 0, l = arr.length; i < l; i++) {
aBg == null && (getCompStyle(arr[i]).backgroundColor != 'transparent' || getCompStyle(arr[i]).backgroundImage != 'none') && (aBg = arr[i]);
for (var cArr = arr[i].childNodes, j = 0, k = cArr.length; j < k; j++) {
cArr[j].nodeType == 1 && cArr[j].nodeName.toLowerCase() == 'span' && cArr[j].className.match(/dummyShadow/) && hideAncestShadow(tObj.elm, document.getElementById(cArr[j].id));
}
}
tObj.shadow != 'none' && tObj.shadow.length > 1 && (getCompStyle(tObj.elm).backgroundColor != 'transparent' || getCompStyle(tObj.elm).backgroundImage != 'none') && (tObj.shadow = revArr(tObj.shadow));
if (tObj.shadow == 'none' && tObj.ePseudo != 'hover') {
for (var arr = tObj.elm.parentNode.childNodes, i = 0, l = arr.length; i < l; i++) {
if (arr[i].nodeName.toLowerCase() == 'span' && arr[i].className == 'dummyShadow') {
getCompStyle(tObj.elm).display == 'inline-block' && (tObj.elm.style.display = 'inline');
getCompStyle(tObj.elm).position == 'relative' && (tObj.elm.style.position = 'static');
break;
}
}
}
if (tObj.shadow != 'none' && nArr.length != 0 && boolShadowChild(tObj.elm)) {
for (var hArr = [], clNode = tObj.elm.cloneNode(true), arr = clNode.childNodes, i = 0, l = arr.length; i < l; i++) {
arr[i] != null && arr[i].hasChildNodes() && arr[i].nodeName.toLowerCase() == 'span' && arr[i].className.match(/dummyShadow/) && (hArr[hArr.length] = arr[i].id, clNode.removeChild(arr[i]));
}
var sNode = clNode.innerHTML;
ieVersion == 9 && (sNode = sNode.replace(/\n/, ' '));
ieVersion == 8 && (tObj.elm.innerHTML = tObj.elm.innerHTML);
for (i = 0, l = tObj.shadow.length; i < l; i++) {
var pxRad = convUnitToPx(tObj.shadow[i].z, tObj.elm);
var xPos = convUnitToPx(tObj.shadow[i].x, tObj.elm) - pxRad + convUnitToPx(getCompStyle(tObj.elm).paddingLeft, tObj.elm);
var yPos = convUnitToPx(tObj.shadow[i].y, tObj.elm) - pxRad + convUnitToPx(getCompStyle(tObj.elm).paddingTop, tObj.elm);
if (ieVersion == 7 && pxRad == 0) {
xPos >= 0 && (xPos -= 1);
yPos >= 0 && (yPos -= 1);
}
var sColor = tObj.shadow[i].cProf || getCompStyle(tObj.elm).color;
var sOpacity = 0.6; // デフォルトの透過度
tObj.shadow[i].cProf != null && tObj.shadow[i].cProf.match(/rgba\(\s*([0-9]+\s*,\s*[0-9]+\s*,\s*[0-9]+)\s*,\s*([01]?[\.0-9]*)\)/) && (sColor = 'rgb(' + RegExp.$1 + ')', sOpacity = (RegExp.$2 * 1));
var sBox = document.createElement('span');
sBox.id = 'dummyShadow' + sId; sId++;
sBox.className = (tObj.hasImp == true) ? 'dummyShadow hasImp' : 'dummyShadow';
sBox.style.display = 'block';
sBox.style.position = 'absolute';
sBox.style.left = xPos + 'px';
sBox.style.top = yPos + 'px';
sBox.style.width = '100%';
sBox.style.color = sColor;
sBox.style.filter = 'progid:DXImageTransform.Microsoft.Blur(PixelRadius=' + pxRad + ', MakeShadow=false, ShadowOpacity=' + sOpacity + ')';
sBox.style.zIndex = -(i + 1);
sBox.innerHTML = sNode;
if (getCompStyle(tObj.elm).display == 'inline') {
tObj.elm.style.display = 'inline-block';
}
if (!(getCompStyle(tObj.elm).position == 'absolute' || getCompStyle(tObj.elm).position == 'fixed')) {
tObj.elm.style.position = 'relative';
ieVersion == 7 && (tObj.elm.style.top = getCompStyle(tObj.elm).paddingTop);
}
if (getCompStyle(tObj.elm).backgroundColor != 'transparent' || getCompStyle(tObj.elm).backgroundImage != 'none') {
getCompStyle(tObj.elm).zIndex != ('auto' || null) ? (sBox.style.zIndex = tObj.elm.style.zIndex) : (tObj.elm.style.zIndex = sBox.style.zIndex = -1);
}
if (aBg && aBg.tagName.toLowerCase() != 'body') {
tObj.elm.style.zIndex = 1; sBox.style.zIndex = -1;
}
ieVersion == 7 && getCompStyle(tObj.elm).lineHeight.match(/^([0-9\.]+)(em|ex|px|cm|mm|in|pt|pc|%)?$/) && (tObj.elm.style.minHeight = !RegExp.$2 ? convUnitToPx(RegExp.$1 + 'em', tObj.elm) : RegExp.$2 == '%' ? convUnitToPx((RegExp.$1 / 100) + 'em', tObj.elm) : convUnitToPx(RegExp.$1 + RegExp.$2, tObj.elm));
tObj.elm.appendChild(sBox);
if (tObj.ePseudo == 'hover') {
sBox.style.visibility = 'hidden';
mOver = tObj.elm.getAttribute('onmouseover') || '';
mOut = tObj.elm.getAttribute('onmouseout') || '';
mOver != '' && !mOver.match(/;$/) && (mOver += ';');
mOut != '' && !mOut.match(/;$/) && (mOut += ';');
mOver += ('showElm(' + sBox.id + ');');
mOut += ('hideElm(' + sBox.id + ');');
if (hArr.length > 0) {
for (j = 0, k = hArr.length; j < k; j++) {
var hElm = document.getElementById(hArr[j]);
if (hElm) {
mOver += ('hideElm(' + hElm.id + ');');
mOut += ('showElm(' + hElm.id + ');');
}
}
}
tObj.elm.setAttribute('onmouseover', removeDupFunc(mOver));
tObj.elm.setAttribute('onmouseout', removeDupFunc(mOut));
}
setShadowNodeColor(document.getElementById(sBox.id));
}
}
}
}
};
var getTargetObj = function (sObj) {
var getObjType = function (oElm) {
return oElm.id != null ? document.getElementById(oElm.id) : document.getElementsByTagName(oElm.elm);
};
var compareObj = function (rObj, cObj) {
return ((rObj.id != null && cObj.id != null && rObj.id == cObj.id) || rObj.id == null || cObj.id == null) &&
(rObj.elm == cObj.tagName.toLowerCase() || rObj.elm == '*') &&
((rObj.eClass != null && cObj.className != null && rObj.eClass == cObj.className) || rObj.eClass == null) ? true : false;
};
var elm = getObjType(sObj.tElm);
if (elm) {
var tObj = { elm: null, ePseudo: sObj.tElm.ePseudo, shadow: sObj.sVal, hasImp: sObj.sImp };
if (sObj.type == 'single') {
if (elm.id && compareObj(sObj.tElm, elm)) {
tObj.elm = elm;
setShadow(tObj);
}
else {
for (var i = 0, l = elm.length; i < l; i++) {
if (compareObj(sObj.tElm, elm[i])) {
tObj.elm = elm[i];
setShadow(tObj);
}
}
}
}
else if (sObj.type == 'descend' || sObj.type == 'child') {
if (elm.id && compareObj(sObj.tElm, elm)) {
var pElm = elm.parentNode;
if (compareObj(sObj.rElm, pElm)) {
tObj.elm = elm;
setShadow(tObj);
}
else if (sObj.type == 'descend') {
for (var arr = getAncestObj(pElm), i = 0, l = arr.length; i < l; i++) {
if (compareObj(sObj.rElm, arr[i])) {
tObj.elm = elm;
setShadow(tObj);
break;
}
}
}
}
else {
for (var i = 0, l = elm.length; i < l; i++) {
if (compareObj(sObj.tElm, elm[i])) {
var pElm = elm[i].parentNode;
if (compareObj(sObj.rElm, pElm)) {
tObj.elm = elm[i];
setShadow(tObj);
}
else if (sObj.type == 'descend') {
for (var arr = getAncestObj(pElm), j = 0, k = arr.length; j < k; j++) {
if (compareObj(sObj.rElm, arr[j])) {
tObj.elm = elm[i];
setShadow(tObj);
break;
}
}
}
}
}
}
}
else if (sObj.type == 'adjacent' || sObj.type == 'general') {
if (elm.id && compareObj(sObj.tElm, elm) && elm.previousSibling != null) {
var pElm = getPrevSibling(elm.previousSibling);
if (pElm && compareObj(sObj.rElm, pElm)) {
tObj.elm = elm;
setShadow(tObj);
}
else if (sObj.type == 'general' && pElm.previousSibling != null) {
for (var arr = getGeneralObj(pElm), i = 0, l = arr.length; i < l; i++) {
if (compareObj(sObj.rElm, arr[i])) {
tObj.elm = elm;
setShadow(tObj);
break;
}
}
}
}
else {
for (var i = 0, l = elm.length; i < l; i++) {
if (compareObj(sObj.tElm, elm[i]) && elm[i].previousSibling != null) {
var pElm = getPrevSibling(elm[i].previousSibling);
if (pElm && compareObj(sObj.rElm, pElm)) {
tObj.elm = elm[i];
setShadow(tObj);
}
else if (sObj.type == 'general' && pElm.previousSibling != null) {
for (var arr = getGeneralObj(pElm), j = 0, k = arr.length; j < k; j++) {
if (compareObj(sObj.rElm, arr[j])) {
tObj.elm = elm[i];
setShadow(tObj);
break;
}
}
}
}
}
}
}
}
};
var getShadowValue = function (shadow) {
if (shadow.match(/none/)) {
return 'none';
}
else {
for (var val = [], arr = shadow.match(/((rgba?\(\s*[0-9\.]+%?\s*,\s*[0-9\.]+%?\s*,\s*[0-9\.]+%?\s*(,\s*[01]?[\.0-9]*\s*)?\)|#[0-9a-fA-F]{3,6}|[a-zA-Z]+)\s)?(\-?[0-9\.]+(em|ex|px|cm|mm|in|pt|pc)?\s*){2,3}(rgba?\(\s*[0-9\.]+%?\s*,\s*[0-9\.]+%?\s*,\s*[0-9\.]+%?\s*(,\s*[01]?[\.0-9]*\s*)?\)|#[0-9a-fA-F]{3,6}|[a-zA-Z]+)?/g), i = 0, l = arr.length; i < l; i++) {
val[i] = { x: '0', y: '0', z: '0', cProf: null };
var uArr = arr[i].match(/\-?[0-9\.]+(em|ex|px|cm|mm|in|pt|pc)?\s+\-?[0-9\.]+(em|ex|px|cm|mm|in|pt|pc)?(\s+[0-9\.]+(em|ex|px|cm|mm|in|pt|pc)?)?/);
if (uArr = uArr[0].split(/\s+/), uArr[0].match(/^(\-?[0-9\.]+(em|ex|px|cm|mm|in|pt|pc)?)$/) && uArr[1].match(/^(\-?[0-9\.]+(em|ex|px|cm|mm|in|pt|pc)?)$/)) {
uArr.length >= 2 && (val[i].x = uArr[0], val[i].y = uArr[1]);
uArr.length == 3 && uArr[2].match(/^([0-9\.]+(em|ex|px|cm|mm|in|pt|pc)?)$/) && (val[i].z = uArr[2]);
arr[i].match(/%/) && (arr[i] = convPercentTo256(arr[i]));
arr[i].match(/^(rgba?\(\s*[0-9]+\s*,\s*[0-9]+\s*,\s*[0-9]+\s*(,\s*[01]?[\.0-9]*\s*)?\)|[a-zA-Z]+)/) ? (val[i].cProf = RegExp.$1) :
arr[i].match(/\s(rgba?\(\s*[0-9]+\s*,\s*[0-9]+\s*,\s*[0-9]+\s*(,\s*[01]?[\.0-9]*\s*)?\)|#[0-9a-fA-F]{3,6}|[a-zA-Z]+)$/) && (val[i].cProf = RegExp.$1);
}
else {
val = 'invalid';
break;
}
}
return val;
}
};
var getSelectorObj = function (sel) {
if (sel != null) {
var obj = { elm: '*', id: null, eClass: null, ePseudo: null };
sel.match(/^([a-zA-Z\*]{1}[a-zA-Z0-9]*)/) && (obj.elm = RegExp.$1);
sel.match(/#([a-zA-Z_]{1}[a-zA-Z0-9_\-]*)/) && (obj.id = RegExp.$1);
sel.match(/\.([a-zA-Z_]{1}[a-zA-Z0-9_\-]*)/) && (obj.eClass = RegExp.$1);
sel.match(/:([a-z]{1}[a-z0-9\(\)\-]+)/) && (obj.ePseudo = RegExp.$1);
return obj;
}
if (sel == null) {
return null;
}
};
var distinctSelector = function (sel) {
var arr = [];
sel.match(/^([a-zA-Z0-9#\.:_\-]+)$/) ? arr = ['single', RegExp.$1, null] :
sel.match(/^([a-zA-Z0-9#\.:_\-]+)\s+([a-zA-Z0-9#\.:_\-]+)$/) ? arr = ['descend', RegExp.$2, RegExp.$1] :
sel.match(/^([a-zA-Z0-9#\.:_\-]+)\s*>\s*([a-zA-Z0-9#\.:_\-]+)$/) ? arr = ['child', RegExp.$2, RegExp.$1] :
sel.match(/^([a-zA-Z0-9#\.:_\-]+)\s*\+\s*([a-zA-Z0-9#\.:_\-]+)$/) ? arr = ['adjacent', RegExp.$2, RegExp.$1] :
sel.match(/^([a-zA-Z0-9#\.:_\-]+)\s*~\s*([a-zA-Z0-9#\.:_\-]+)$/) && (arr = ['general', RegExp.$2, RegExp.$1]);
return arr;
};
for (var arr = ieShadowSettings(), sId = cNum(), i = 0, l = arr.length; i < l; i++) {
for (var sSel = arr[i].sel.split(/,/), sReg = /^\s*([a-zA-Z0-9#\.:_\-\s>\+~]+)\s*$/, j = 0, k = sSel.length; j < k; j++) {
sSel[j].match(sReg) && (sSel[j] = RegExp.$1);
var sArr = distinctSelector(sSel[j]);
var sObj = { type: null, tElm: null, rElm: null, sVal: null, sImp: null };
sObj.type = sArr[0];
sObj.tElm = getSelectorObj(sArr[1]);
sObj.rElm = getSelectorObj(sArr[2]);
sObj.sVal = getShadowValue(arr[i].shadow);
sObj.sImp = arr[i].shadow.match(/important/) ? true : false;
getTargetObj(sObj);
}
}
};
addEvent(window, 'load', function () { ieVersion >= 7 && ieVersion <= 9 && textShadowForMSIE(); });
实现评价：不用定义多重文本块，调用JS方法最简单。但是页面会产生大量的重复文本块。如果页面有很多需要显示阴影的文本块，那么请不要使用这种方法。性能一般。
（对不起读者了，一开始我也没有经过大数据量测试，就告诉同学：推荐这种方法，现在郑重道歉！少量文本块阴影可用，大量文本块请放弃！）
其实，还有第三种办法：
3）单文本过滤器
实现原理：定义一个文本块，使用 shadow 过滤器添加阴影。
显示代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title></title>
6 <style type="text/css">
7 body
8 {
9 background-color: #cccccc;
10 }
11 h1
12 {
13 color: #ff9900;
14 font-family: 微软雅黑, 黑体;
15 font-size: 48pt !important;
16 font-weight: bold;
17 filter: Shadow(color=#fbfcfd, direction=135, dtrength=4);
18 text-shadow: #fbfcfd 4px 4px 4px;
19 padding-bottom: 2px;
20 }
21 </style>
22 </head>
23 <body>
24 <div><h1><span>基本业务框架系统</span></h1></div>
25 </body>
26 </html>
这种方法，显示的文本阴影有黑边，效果比不上前面两种。所以放到最后来讲。
这种方法，只要定义一个文本块，CSS 设置最简单，效果也是最差的。
实现评价：定义一个文本块，不用写JS代码。性能比 blur 过滤器稍差一些。
最后说明：无论哪一种方法，都没有 浏览器内置支持的 CSS3 text-shadow 来的快，IE浏览器真的很垃圾。过滤器影响性能，尽管可用，但是慎用！
