css 低版本 IE （IE8） 圆角边框

时间：

分类：

css

字数：

7.8k 字

时长：

大约需要 48 分钟

次数：

0 人阅读

早期 CSS3 刚出，IE 被前端开发恨死，有大佬对 border-radius 做了兼容，可兼容低版本IE，利用了 IE 私有的 behavior 属性。

示例

example.html

源码

注意源码中有引入一个 pie.htc 文件，文件在此：pie.htc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>低版本 IE （IE8） 圆角边框</title>
  <style>
    .test {
      border-radius: 5px;
      border: 1px solid #000;
      width: 100px;
      height: 100px
    }
  </style>
  <!--[if lt IE 9]>
  <style type="text/css">
    .behavior{
      behavior: url("./pie.htc");
    }
  </style>
  <![endif]-->
</head>

<body>
  <div class="test behavior"></div>
</body>

</html>

pie.htc 源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!--
PIE: CSS3 rendering for IE
Version 1.0beta1
http://css3pie.com
Licensed for use under the Apache License, Version 2.0
-->
<PUBLIC:COMPONENT lightWeight="true">
    <PUBLIC:ATTACH EVENT="onresize" FOR="element" ONEVENT="update()" />
    <PUBLIC:ATTACH EVENT="onresize" FOR="window" ONEVENT="update()" /><!-- for IE8 -->
    <PUBLIC:ATTACH EVENT="onmove" FOR="element" ONEVENT="update()" />
    <PUBLIC:ATTACH EVENT="onpropertychange" FOR="element" ONEVENT="propChanged()" />
    <PUBLIC:ATTACH EVENT="onmouseenter" FOR="element" ONEVENT="mouseEntered()" />
    <PUBLIC:ATTACH EVENT="onmouseleave" FOR="element" ONEVENT="mouseLeft()" />
    <PUBLIC:ATTACH EVENT="oncontentready" FOR="element" ONEVENT="init()" />
    <PUBLIC:ATTACH EVENT="ondetach" FOR="element" ONEVENT="cleanup()" />

    <script type="text/javascript">
function j(){return function(){}}var C=window.PIE;
if(!C){C=window.PIE={T:"-pie-",Ha:"Pie",Fa:"pie_"};if(!window.XMLHttpRequest){C.Qb=true;C.T=C.T.replace(/^-/,"")}C.q={ja:function(a){var b=C.zb;if(!b){b=C.zb=element.document.createDocumentFragment();b.namespaces.add("css3vml","urn:schemas-microsoft-com:vml")}return b.createElement("css3vml:"+a)},Aa:function(a){var b,c,d,e,f=arguments;b=1;for(c=f.length;b<c;b++){e=f[b];for(d in e)if(e.hasOwnProperty(d))a[d]=e[d]}return a},bb:function(a,b,c){var d=C.tb||(C.tb={}),e=d[a],f;if(e)b.call(c,e);else{f=new Image;
f.onload=function(){e=d[a]={v:f.width,i:f.height};b.call(c,e);f.onload=null};f.src=a}}};C.g=function(){function a(b){this.F=b}a.prototype={Ba:/(px|em|ex|mm|cm|in|pt|pc|%)$/,Qa:function(){var b=this.ub;if(b===undefined)b=this.ub=parseFloat(this.F);return b},xa:function(){var b=this.sa;if(!b)b=this.sa=(b=this.F.match(this.Ba))&&b[0]||"px";return b},a:function(b,c){var d=this.Qa(),e=this.xa();switch(e){case "px":return d;case "%":return d*(typeof c==="function"?c():c)/100;case "em":return d*this.Pa(b);
case "ex":return d*this.Pa(b)/2;default:return d*a.Hb[e]}},Pa:function(b){var c=b.currentStyle.fontSize,d;if(c.indexOf("px")>0)return parseFloat(c);else{c=this.yb;if(!c){c=this.yb=b.document.createElement("length-calc");d=c.style;d.width="1em";d.position="absolute";d.top=d.left=-9999}b.appendChild(c);d=c.offsetWidth;b.removeChild(c);return d}}};a.Hb=function(){for(var b=["mm","cm","in","pt","pc"],c={},d=element.parentNode,e=0,f=b.length,i,h,g;e<f;e++){i=b[e];h=element.document.createElement("length-calc");
g=h.style;g.position="absolute";g.top=g.left=-9999;g.width="100"+i;d.appendChild(h);c[i]=h.offsetWidth/100;d.removeChild(h)}return c}();a.Ja=new a("0");return a}();C.qa=function(){function a(b){this.C=b}a.prototype={Nb:function(){if(!this.La){var b=this.C,c=b.length,d=C.g.Ja,e=new C.g("50%"),f=C.k.Y.V,i={top:1,center:1,bottom:1},h={left:1,center:1,right:1};d=["left",d,"top",d];if(c===1){b.push({type:f,value:"center"});c++}if(c===2){f&(b[0].type|b[1].type)&&b[0].value in i&&b[1].value in h&&b.push(b.shift());
if(b[0].type&f)if(b[0].value==="center")d[1]=e;else d[0]=b[0].value;else if(b[0].J())d[1]=new C.g(b[0].value);if(b[1].type&f)if(b[1].value==="center")d[3]=e;else d[2]=b[1].value;else if(b[1].J())d[3]=new C.g(b[1].value)}this.La=d}return this.La},coords:function(b,c,d){var e=this.Nb(),f=e[1].a(b,c);b=e[3].a(b,d);return{x:Math.round(e[0]==="right"?c-f:f),y:Math.round(e[2]==="bottom"?d-b:b)}}};return a}();C.cb=function(){function a(b){this.F=b}a.prototype={Ba:/[a-z]+$/i,xa:function(){return this.sa||
(this.sa=this.F.match(this.Ba)[0].toLowerCase())},Ib:function(){var b=this.sb,c;if(b===undefined){b=this.xa();c=parseFloat(this.F,10);b=this.sb=b==="deg"?c:b==="rad"?c/Math.PI*180:b==="grad"?c/400*360:b==="turn"?c*360:0}return b}};return a}();C.U=function(){function a(b){this.F=b}a.Xb=/\s*rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d+|\d*\.\d+)\s*\)\s*/;a.prototype={parse:function(){if(!this.ga){var b=this.F,c=b.match(a.Xb);if(c){this.ga="rgb("+c[1]+","+c[2]+","+c[3]+")";this.Ka=parseFloat(c[4])}else{this.ga=
b;this.Ka=1}}},value:function(b){this.parse();return this.ga==="currentColor"?b.currentStyle.color:this.ga},Ma:function(){this.parse();return this.Ka}};return a}();C.k=function(){function a(c){this.ka=c;this.ch=0;this.C=[];this.da=0}var b=a.Y={ea:1,Ea:2,S:4,nb:8,Ga:16,V:32,o:64,W:128,X:256,fa:512,pb:1024,URL:2048};a.Ia=function(c,d){this.type=c;this.value=d};a.Ia.prototype={za:function(){return this.type&b.o||this.type&b.W&&this.value==="0"},J:function(){return this.za()||this.type&b.fa}};a.prototype=
{fc:/\s/,Sb:/^[\+\-]?(\d*\.)?\d+/,url:/^url\(\s*("([^"]*)"|'([^']*)'|([!#$%&*-~]*))\s*\)/i,Ta:/^\-?[_a-z][\w-]*/i,ac:/^("([^"]*)"|'([^']*)')/,Ob:/^#([\da-f]{6}|[\da-f]{3})/i,dc:{px:b.o,em:b.o,ex:b.o,mm:b.o,cm:b.o,"in":b.o,pt:b.o,pc:b.o,deg:b.ea,rad:b.ea,grad:b.ea},Eb:{aqua:1,black:1,blue:1,fuchsia:1,gray:1,green:1,lime:1,maroon:1,navy:1,olive:1,purple:1,red:1,silver:1,teal:1,white:1,yellow:1,currentColor:1},Db:{rgb:1,rgba:1,hsl:1,hsla:1},next:function(c){function d(p,o){p=new a.Ia(p,o);if(!c){k.C.push(p);
k.da++}return p}function e(){k.da++;return null}var f,i,h,g,k=this;if(this.da<this.C.length)return this.C[this.da++];for(;this.fc.test(this.ka.charAt(this.ch));)this.ch++;if(this.ch>=this.ka.length)return e();i=this.ch;f=this.ka.substring(this.ch);h=f.charAt(0);switch(h){case "#":if(g=f.match(this.Ob)){this.ch+=g[0].length;return d(b.S,g[0])}break;case '"':case "'":if(g=f.match(this.ac)){this.ch+=g[0].length;return d(b.pb,g[2]||g[3]||"")}break;case "/":case ",":this.ch++;return d(b.X,h);case "u":if(g=
f.match(this.url)){this.ch+=g[0].length;return d(b.URL,g[2]||g[3]||g[4]||"")}}if(g=f.match(this.Sb)){h=g[0];this.ch+=h.length;if(f.charAt(h.length)==="%"){this.ch++;return d(b.fa,h+"%")}if(g=f.substring(h.length).match(this.Ta)){h+=g[0];this.ch+=g[0].length;return d(this.dc[g[0].toLowerCase()]||b.nb,h)}return d(b.W,h)}if(g=f.match(this.Ta)){h=g[0];this.ch+=h.length;if(h.toLowerCase()in this.Eb)return d(b.S,h);if(f.charAt(h.length)==="("){this.ch++;if(h.toLowerCase()in this.Db){f=function(p){return p&&
p.type&b.W};g=function(p){return p&&p.type&(b.W|b.fa)};var n=function(p,o){return p&&p.value===o},m=function(){return k.next(1)};if((h.charAt(0)==="r"?g(m()):f(m()))&&n(m(),",")&&g(m())&&n(m(),",")&&g(m())&&(h==="rgb"||h==="hsa"||n(m(),",")&&f(m()))&&n(m(),")"))return d(b.S,this.ka.substring(i,this.ch));return e()}return d(b.Ga,h+"(")}return d(b.V,h)}this.ch++;return d(b.Ea,h)},n:function(){return this.C[this.da-- -2]},all:function(){for(;this.next(););return this.C},R:function(c,d){for(var e=[],
f,i;f=this.next();){if(c(f)){i=true;this.n();break}e.push(f)}return d&&!i?null:e}};return a}();C.w={M:function(a){function b(c){this.element=c}C.q.Aa(b.prototype,C.w,a);return b},f:function(){if(this.j())this.xb=this.N(this.rb=this.aa());return this.xb},aa:function(){var a=this.element,b=a.style;a=a.currentStyle;var c=this.$,d=this.ca,e=this.vb||(this.vb=C.T+c),f=this.wb||(this.wb=C.Ha+d.charAt(0).toUpperCase()+d.substring(1));return b[f]||a.getAttribute(e)||b[d]||a.getAttribute(c)},d:function(){return!!this.f()},
j:function(){return this.rb!==this.aa()}};C.eb=C.w.M({$:C.T+"background",ca:C.Ha+"Background",Bb:{scroll:1,fixed:1,local:1},pa:{"repeat-x":1,"repeat-y":1,repeat:1,"no-repeat":1},Tb:{"padding-box":1,"border-box":1,"content-box":1},Cb:{"padding-box":1,"border-box":1},Wb:{top:1,right:1,bottom:1,left:1,center:1},Zb:{contain:1,cover:1},N:function(a){function b(q){return q.J()||q.type&g&&q.value in p}function c(q){return q.J()&&new C.g(q.value)||q.value==="auto"&&"auto"}var d=this.element.currentStyle,
e,f,i=C.k.Y,h=i.X,g=i.V,k=i.S,n,m,p=this.Wb,o,r,t=null;if(this.wa()){a=new C.k(a);t={images:[]};for(f={};e=a.next();){n=e.type;m=e.value;if(!f.type&&n&i.Ga&&m==="linear-gradient("){o={P:[],type:"linear-gradient"};for(r={};e=a.next();){n=e.type;m=e.value;if(n&i.Ea&&m===")"){r.color&&o.P.push(r);o.P.length>1&&C.q.Aa(f,o);break}if(n&k){if(o.ua||o.ya){e=a.n();if(e.type!==h)break;a.next()}r={color:new C.U(m)};e=a.next();if(e.J())r.Ua=new C.g(e.value);else a.n()}else if(n&i.ea&&!o.ua&&!r.color&&!o.P.length)o.ua=
new C.cb(e.value);else if(b(e)&&!o.ya&&!r.color&&!o.P.length){a.n();o.ya=new C.qa(a.R(function(q){return!b(q)},false))}else if(n&h&&m===","){if(r.color){o.P.push(r);r={}}}else break}}else if(!f.type&&n&i.URL){f.url=m;f.type="image"}else if(b(e)&&!f.size){a.n();f.position=new C.qa(a.R(function(q){return!b(q)},false))}else if(n&g)if(m in this.pa)f.repeat=m;else if(m in this.Tb){f.origin=m;if(m in this.Cb)f.clip=m}else{if(m in this.Bb)f.jc=m}else if(n&k&&!t.color)t.color=new C.U(m);else if(n&h)if(m===
"/"){e=a.next();n=e.type;m=e.value;if(n&g&&m in this.Zb)f.size=m;else if(m=c(e))f.size={v:m,i:c(a.next())||a.n()&&m}}else{if(m===","&&f.type){t.images.push(f);f={}}}else return null}f.type&&t.images.push(f)}else this.ab(function(){var q=d.backgroundPositionX,v=d.backgroundPositionY,l=d.backgroundImage,u=d.backgroundColor;t={};if(u!=="transparent")t.color=new C.U(u);if(l!=="none")t.images=[{type:"image",url:(new C.k(l)).next().value,repeat:d.backgroundRepeat,position:new C.qa((new C.k(q+" "+v)).all())}]});
return t},ab:function(a){var b=this.element.runtimeStyle,c=b.backgroundImage,d=b.backgroundColor;b.backgroundImage=b.backgroundColor="";a=a.call(this);b.backgroundImage=c;b.backgroundColor=d;return a},aa:function(){var a=this.element.currentStyle;return this.wa()||this.ab(function(){return a.backgroundColor+" "+a.backgroundImage+" "+a.backgroundRepeat+" "+a.backgroundPositionX+" "+a.backgroundPositionY})},wa:function(){var a=this.element;return a.style[this.ca]||a.currentStyle.getAttribute(this.$)},
d:function(){return this.wa()&&!!this.f()}});C.jb=C.w.M({Yb:["Top","Right","Bottom","Left"],Rb:{mc:"1px",kc:"3px",lc:"5px"},N:function(){var a={},b={},c={},d=this.element,e=d.currentStyle;d=d.runtimeStyle;var f=d.borderColor,i=0,h=false,g=true,k=true,n=true,m,p,o,r,t,q,v;for(d.borderColor="";i<4;i++){o=this.Yb[i];v=o.charAt(0).toLowerCase();m=b[v]=e["border"+o+"Style"];p=e["border"+o+"Color"];o=e["border"+o+"Width"];if(i>0){if(m!==r)k=false;if(p!==t)g=false;if(o!==q)n=false}r=m;t=p;q=o;c[v]=new C.U(p);
o=a[v]=new C.g(b[v]==="none"?"0":this.Rb[o]||o);if(o.a(this.element)>0)h=true}d.borderColor=f;return h?{$a:a,bc:b,Fb:c,gc:n,Gb:g,cc:k}:null},aa:function(){var a=this.element,b=a.currentStyle;a=a.runtimeStyle;var c=a.borderColor;a.borderColor="";b=b.borderWidth+"|"+b.borderStyle+"|"+b.borderColor;a.borderColor=c;return b}});C.hb=C.w.M({$:"border-radius",ca:"borderRadius",N:function(a){var b=null,c,d,e,f,i=false;if(a){d=new C.k(a);var h=function(){for(var g=[],k;(e=d.next())&&e.J();){f=new C.g(e.value);
k=f.Qa();if(k<0)return null;if(k>0)i=true;g.push(f)}return g.length>0&&g.length<5?{tl:g[0],tr:g[1]||g[0],br:g[2]||g[0],bl:g[3]||g[1]||g[0]}:null};if(a=h()){if(e){if(e.type&C.k.Y.X&&e.value==="/")c=h()}else c=a;if(i&&a&&c)b={x:a,y:c}}}return b}});C.gb=C.w.M({$:"border-image",ca:"borderImage",pa:{stretch:1,round:1,repeat:1,space:1},N:function(a){var b=null,c,d,e,f,i,h,g=0,k,n=C.k.Y,m=n.V,p=n.W,o=n.o,r=n.fa;if(a){c=new C.k(a);b={};for(var t=function(l){return l&&l.type&n.X&&l.value==="/"},q=function(l){return l&&
l.type&m&&l.value==="fill"},v=function(){f=c.R(function(l){return!(l.type&(p|r))});if(q(c.next())&&!b.fill)b.fill=true;else c.n();if(t(c.next())){g++;i=c.R(function(){return!(d.type&(p|r|o))&&!(d.type&m&&d.value==="auto")});if(t(c.next())){g++;h=c.R(function(){return!(d.type&(p|o))})}}else c.n()};d=c.next();){a=d.type;e=d.value;if(a&(p|r)&&!f){c.n();v()}else if(q(d)&&!b.fill){b.fill=true;v()}else if(a&m&&this.pa[e]&&!b.repeat){b.repeat={i:e};if(d=c.next())if(d.type&m&&this.pa[d.value])b.repeat.Ca=
d.value;else c.n()}else if(a&n.URL&&!b.src)b.src=e;else return null}if(!b.src||!f||f.length<1||f.length>4||i&&i.length>4||g===1&&i.length<1||h&&h.length>4||g===2&&h.length<1)return null;if(!b.repeat)b.repeat={i:"stretch"};if(!b.repeat.Ca)b.repeat.Ca=b.repeat.i;a=function(l,u){return{Q:u(l[0]),O:u(l[1]||l[0]),H:u(l[2]||l[0]),K:u(l[3]||l[1]||l[0])}};b.slice=a(f,function(l){return new C.g(l.type&p?l.value+"px":l.value)});b.width=i&&i.length>0?a(i,function(l){return l.type&(o|r)?new C.g(l.value):l.value}):
(k=this.element.currentStyle)&&{Q:new C.g(k.borderTopWidth),O:new C.g(k.borderRightWidth),H:new C.g(k.borderBottomWidth),K:new C.g(k.borderLeftWidth)};b.ba=a(h||[0],function(l){return l.type&o?new C.g(l.value):l.value})}return b}});C.mb=C.w.M({$:"box-shadow",ca:"boxShadow",N:function(a){var b,c=C.g,d=C.k.Y,e;if(a){e=new C.k(a);b={ba:[],oa:[]};for(a=function(){for(var f,i,h,g,k,n;f=e.next();){h=f.value;i=f.type;if(i&d.X&&h===",")break;else if(f.za()&&!k){e.n();k=e.R(function(m){return!m.za()})}else if(i&
d.S&&!g)g=h;else if(i&d.V&&h==="inset"&&!n)n=true;else return false}f=k&&k.length;if(f>1&&f<5){(n?b.oa:b.ba).push({hc:new c(k[0].value),ic:new c(k[1].value),blur:new c(k[2]?k[2].value:"0"),$b:new c(k[3]?k[3].value:"0"),color:new C.U(g||"currentColor")});return true}return false};a(););}return b&&(b.oa.length||b.ba.length)?b:null}});C.qb=C.w.M({aa:function(){var a=this.element.currentStyle;return a.visibility+"|"+a.display},N:function(){var a=this.element,b=a.runtimeStyle;a=a.currentStyle;var c=b.visibility,
d;b.visibility="";d=a.visibility;b.visibility=c;return{ec:d!=="hidden",Jb:a.display!=="none"}},d:function(){return false}});C.p={L:function(a){function b(c,d,e){this.element=c;this.e=d;this.parent=e}C.q.Aa(b.prototype,C.p,a);return b},B:function(){return false},D:j(),Xa:j(),u:j(),ta:function(a,b){this.Wa(a);for(var c=this.Z||(this.Z=[]),d=a+1,e=c.length,f;d<e;d++)if(f=c[d])break;c[a]=b;this.m().insertBefore(b,f||null)},ma:function(a){var b=this.Z;return b&&b[a]||null},Wa:function(a){var b=this.ma(a),
c=this.G;if(b&&c){c.removeChild(b);this.Z[a]=null}},na:function(a,b,c,d){var e=this.ra||(this.ra={}),f=e[a];if(!f){f=e[a]=C.q.ja("shape");if(b)f.appendChild(f[b]=C.q.ja(b));if(d){c=this.ma(d);if(!c){this.ta(d,this.element.document.createElement("group"+d));c=this.ma(d)}}c.appendChild(f);a=f.style;a.position="absolute";a.left=a.top=0;a.behavior="url(#default#VML)"}return f},va:function(a){var b=this.ra,c=b&&b[a];if(c){c.parentNode.removeChild(c);delete b[a]}return!!c},Ra:function(a){var b=this.element,
c=b.offsetWidth,d=b.offsetHeight,e,f,i,h,g,k,n;e=a.x.tl.a(b,c);f=a.y.tl.a(b,d);i=a.x.tr.a(b,c);h=a.y.tr.a(b,d);g=a.x.br.a(b,c);k=a.y.br.a(b,d);n=a.x.bl.a(b,c);a=a.y.bl.a(b,d);c=Math.min(c/(e+i),d/(h+k),c/(n+g),d/(f+a));if(c<1){e*=c;f*=c;i*=c;h*=c;g*=c;k*=c;n*=c;a*=c}return{x:{tl:e,tr:i,br:g,bl:n},y:{tl:f,tr:h,br:k,bl:a}}},la:function(a,b,c){b=b||1;var d,e,f=this.element;e=f.offsetWidth*b;f=f.offsetHeight*b;var i=this.e.s,h=Math.floor,g=Math.ceil,k=a?a.Q*b:0,n=a?a.O*b:0,m=a?a.H*b:0;a=a?a.K*b:0;var p,
o,r,t,q;if(c||i.d()){d=this.Ra(c||i.f());c=d.x.tl*b;i=d.y.tl*b;p=d.x.tr*b;o=d.y.tr*b;r=d.x.br*b;t=d.y.br*b;q=d.x.bl*b;b=d.y.bl*b;e="m"+h(a)+","+h(i)+"qy"+h(c)+","+h(k)+"l"+g(e-p)+","+h(k)+"qx"+g(e-n)+","+h(o)+"l"+g(e-n)+","+g(f-t)+"qy"+g(e-r)+","+g(f-m)+"l"+h(q)+","+g(f-m)+"qx"+h(a)+","+g(f-b)+" x e"}else e="m"+h(a)+","+h(k)+"l"+g(e-n)+","+h(k)+"l"+g(e-n)+","+g(f-m)+"l"+h(a)+","+g(f-m)+"xe";return e},m:function(){var a=this.parent.ma(this.zIndex),b;if(!a){a=this.element.document.createElement(this.ia);
b=a.style;b.position="absolute";b.top=b.left=0;this.parent.ta(this.zIndex,a)}return a},h:function(){this.parent.Wa(this.zIndex);delete this.ra;delete this.Z}};C.ob=C.p.L({d:function(){var a=this.e;for(var b in a)if(a.hasOwnProperty(b)&&a[b].d())return true;return false},B:function(){return this.e.Za.j()},Xa:function(){if(this.d()){var a=this.element,b=a,c,d,e=this.m().style,f=0;c=0;do b=b.offsetParent;while(b&&b.currentStyle.position==="static");c=a.getBoundingClientRect();if(b){d=b.getBoundingClientRect();
b=b.currentStyle;f=c.left-d.left-(parseFloat(b.borderLeftWidth)||0);c=c.top-d.top-(parseFloat(b.borderTopWidth)||0)}else{b=a.document.documentElement;f=c.left+b.scrollLeft-b.clientLeft;c=c.top+b.scrollTop-b.clientTop}e.left=f;e.top=c;e.zIndex=a.currentStyle.position==="static"?-1:a.currentStyle.zIndex}},u:function(){if(this.d()){var a=this.element,b=this.m().style;b.width=a.offsetWidth;b.height=a.offsetHeight}},Ya:function(){var a=this.e.Za.f();this.m().style.display=a.ec&&a.Jb?"":"none"},D:function(){this.d()?
this.Ya():this.h()},m:function(){var a=this.G,b,c;if(!a){b=this.element;a=this.G=b.document.createElement("css3-container");c=a.style;c.position=b.currentStyle.position==="fixed"?"fixed":"absolute";this.Ya();b.parentNode.insertBefore(a,b)}return a},h:function(){var a=this.G;a&&a.parentNode&&a.parentNode.removeChild(a);delete this.G;delete this.Z}});C.db=C.p.L({zIndex:2,ia:"background",B:function(){var a=this.e;return a.I.j()||a.s.j()},d:function(){var a=this.e;return a.z.d()||a.s.d()||a.I.d()||a.A.d()&&
a.A.f().oa},u:function(){this.d()&&this.Na()},D:function(){this.h();this.d()&&this.Na()},Na:function(){this.Kb();this.Lb()},Kb:function(){var a=this.e.I.f(),b=this.element,c=a&&a.color&&a.color.value(b),d,e,f;if(c&&c!=="transparent"){this.Sa();d=this.na("bgColor","fill",this.m(),1);e=b.offsetWidth;b=b.offsetHeight;d.stroked=false;d.coordsize=e*2+","+b*2;d.coordorigin="1,1";d.path=this.la(null,2);f=d.style;f.width=e;f.height=b;d.fill.color=c;a=a.color.Ma();if(a<1)d.fill.opacity=a}else this.va("bgColor")},
Lb:function(){var a=this.e.I.f();a=a&&a.images;var b,c,d,e,f,i;if(a){this.Sa();b=this.element;d=b.offsetWidth;e=b.offsetHeight;for(i=a.length;i--;){b=a[i];c=this.na("bgImage"+i,"fill",this.m(),2);c.stroked=false;c.fill.type="tile";c.fillcolor="none";c.coordsize=d*2+","+e*2;c.coordorigin="1,1";c.path=this.la(0,2);f=c.style;f.width=d;f.height=e;if(b.type==="linear-gradient")this.Ab(c,b);else{c.fill.src=b.url;this.Vb(c,i)}}}for(i=a?a.length:0;this.va("bgImage"+i++););},Vb:function(a,b){C.q.bb(a.fill.src,
function(c){var d=a.fill,e=this.element,f=e.offsetWidth,i=e.offsetHeight,h=this.e,g=h.ha.f(),k=g&&g.$a;g=k?k.t.a(e):0;var n=k?k.r.a(e):0,m=k?k.b.a(e):0;k=k?k.l.a(e):0;h=h.I.f().images[b];e=h.position?h.position.coords(e,f-c.v-k-n,i-c.i-g-m):{x:0,y:0};h=h.repeat;n=0;m=f;var p=i,o=0;k=e.x+k+0.5;g=e.y+g+0.5;d.position=k/f+","+g/i;if(h&&h!=="repeat"){if(h==="repeat-x"||h==="no-repeat"){n=g+1;p=g+c.i+1}if(h==="repeat-y"||h==="no-repeat"){o=k+1;m=k+c.v+1}a.style.clip="rect("+n+"px,"+m+"px,"+p+"px,"+o+"px)"}},
this)},Ab:function(a,b){function c(x,y,w,D,H){if(w===0||w===180)return[D,y];else if(w===90||w===270)return[x,H];else{w=Math.tan(-w*m/180);x=w*x-y;y=-1/w;D=y*D-H;H=y-w;return[(D-x)/H,(w*D-y*x)/H]}}function d(){q=g>=90&&g<270?i:0;v=g<180?h:0;l=i-q;u=h-v}function e(x,y){var w=y[0]-x[0];x=y[1]-x[1];return Math.abs(w===0?x:x===0?w:Math.sqrt(w*w+x*x))}var f=this.element,i=f.offsetWidth,h=f.offsetHeight;a=a.fill;var g=b.ua,k=b.ya;b=b.P;var n=b.length,m=Math.PI,p,o,r,t,q,v,l,u,s,A,B,z;if(k){k=k.coords(f,
i,h);p=k.x;o=k.y}if(g){g=g.Ib();if(g<0)g+=360;g%=360;d();if(!k){p=q;o=v}k=c(p,o,g,l,u);r=k[0];t=k[1]}else if(k){r=i-p;t=h-o}else{p=o=r=0;t=h}k=r-p;s=t-o;if(g===undefined){g=-Math.atan2(s,k)/m*180;if(g<0)g+=360;g%=360;d()}k=Math.atan2(k*i/h,s)/m*180;k+=180;k%=360;A=e([p,o],[r,t]);r=e([q,v],c(q,v,g,l,u));t=[];o=e([p,o],c(p,o,g,q,v))/r*100;p=[];for(s=0;s<n;s++)p.push(b[s].Ua?b[s].Ua.a(f,A):s===0?0:s===n-1?A:null);for(s=1;s<n;s++){if(p[s]===null){B=p[s-1];A=s;do z=p[++A];while(z===null);p[s]=B+(z-B)/
(A-s+1)}p[s]=Math.max(p[s],p[s-1])}for(s=0;s<n;s++)t.push(o+p[s]/r*100+"% "+b[s].color.value(f));a.angle=k;a.type="gradient";a.method="sigma";a.color=b[0].color.value(f);a.color2=b[n-1].color.value(f);a.colors.value=t.join(",")},Sa:function(){var a=this.element.runtimeStyle;a.backgroundImage="none";a.backgroundColor="transparent"},h:function(){C.p.h.call(this);var a=this.element.runtimeStyle;a.backgroundImage=a.backgroundColor=""}});C.ib=C.p.L({zIndex:4,ia:"border",B:function(){var a=this.e;return a.ha.j()||
a.s.j()},d:function(){var a=this.e;return a.z.d()||a.s.d()||a.I.d()},u:function(){this.d()&&this.Oa()},D:function(){this.h();this.d()&&this.Oa()},Oa:function(){var a=this.element,b=a.offsetWidth,c=a.offsetHeight,d,e,f,i,h,g;if(this.e.ha.f()){this.Pb();f=this.Mb(2);h=0;for(g=f.length;h<g;h++){i=f[h];d=this.na("borderPiece"+h,i.stroke?"stroke":"fill",this.m());d.coordsize=b*2+","+c*2;d.coordorigin="1,1";d.path=i.path;e=d.style;e.width=b;e.height=c;d.filled=!!i.fill;d.stroked=!!i.stroke;if(i.stroke){d=
d.stroke;d.weight=i.Da+"px";d.color=i.color.value(a);d.dashstyle=i.stroke==="dashed"?"2 2":i.stroke==="dotted"?"1 1":"solid";d.linestyle=i.stroke==="double"&&i.Da>2?"ThinThin":"Single"}else d.fill.color=i.fill.value(a)}for(;this.va("borderPiece"+h++););}},Pb:function(){var a=this.element,b=a.runtimeStyle;if(C.Qb){if(a.childNodes.length!==1||a.firstChild.tagName!=="ie6-mask"){var c=a.document.createElement("ie6-mask"),d=c.style;d.visibility="visible";for(d.zoom=1;d=a.firstChild;)c.appendChild(d);a.appendChild(c);
b.visibility="hidden"}}else b.borderColor="transparent"},Mb:function(a){var b=this.element,c,d,e=this.e.ha,f=[],i,h,g,k,n,m,p,o;if(e.d()){e=e.f();m=e.$a;p=e.bc;o=e.Fb;if(e.gc&&e.cc&&e.Gb){e=m.t.a(b);g=e/2;f.push({path:this.la({Q:g,O:g,H:g,K:g},a),stroke:p.t,color:o.t,Da:e})}else{a=a||1;c=b.offsetWidth;d=b.offsetHeight;e=m.t.a(b);g=m.r.a(b);k=m.b.a(b);b=m.l.a(b);var r={t:e,r:g,b:k,l:b};b=this.e.s;if(b.d())n=this.Ra(b.f());i=Math.floor;h=Math.ceil;var t=function(l,u){return n?n[l][u]:0},q=function(l,
u,s,A,B,z){var x=t("x",l),y=t("y",l),w=l.charAt(1)==="r";l=l.charAt(0)==="b";return x>0&&y>0?(z?"al":"ae")+(w?h(c-x):i(x))*a+","+(l?h(d-y):i(y))*a+","+(i(x)-u)*a+","+(i(y)-s)*a+","+A*65535+","+2949075*(B?1:-1):(z?"m":"l")+(w?c-u:u)*a+","+(l?d-s:s)*a},v=function(l,u,s,A){var B=l==="t"?i(t("x","tl"))*a+","+h(u)*a:l==="r"?h(c-u)*a+","+i(t("y","tr"))*a:l==="b"?h(c-t("x","br"))*a+","+i(d-u)*a:i(u)*a+","+h(d-t("y","bl"))*a;l=l==="t"?h(c-t("x","tr"))*a+","+h(u)*a:l==="r"?h(c-u)*a+","+h(d-t("y","br"))*a:
l==="b"?i(t("x","bl"))*a+","+i(d-u)*a:i(u)*a+","+i(t("y","tl"))*a;return s?(A?"m"+l:"")+"l"+B:(A?"m"+B:"")+"l"+l};b=function(l,u,s,A,B,z){var x=l==="l"||l==="r",y=r[l],w,D;if(y>0&&p[l]!=="none"){w=r[x?l:u];u=r[x?u:l];D=r[x?l:s];s=r[x?s:l];if(p[l]==="dashed"||p[l]==="dotted"){f.push({path:q(A,w,u,z+45,0,1)+q(A,0,0,z,1,0),fill:o[l]});f.push({path:v(l,y/2,0,1),stroke:p[l],Da:y,color:o[l]});f.push({path:q(B,D,s,z,0,1)+q(B,0,0,z-45,1,0),fill:o[l]})}else f.push({path:q(A,w,u,z+45,0,1)+v(l,y,0,0)+q(B,D,
s,z,0,0)+(p[l]==="double"&&y>2?q(B,D-i(D/3),s-i(s/3),z-45,1,0)+v(l,h(y/3*2),1,0)+q(A,w-i(w/3),u-i(u/3),z,1,0)+"x "+q(A,i(w/3),i(u/3),z+45,0,1)+v(l,i(y/3),1,0)+q(B,i(D/3),i(s/3),z,0,0):"")+q(B,0,0,z-45,1,0)+v(l,0,1,0)+q(A,0,0,z,1,0),fill:o[l]})}};b("t","l","r","tl","tr",90);b("r","t","b","tr","br",0);b("b","r","l","br","bl",-90);b("l","b","t","bl","tl",-180)}}return f},h:function(){C.p.h.call(this);this.element.runtimeStyle.borderColor=""}});C.fb=C.p.L({zIndex:5,Ub:["t","tr","r","br","b","bl","l",
"tl","c"],B:function(){var a=this.e;return a.z.j()||a.z.j()},d:function(){return this.e.z.d()},u:function(){if(this.d()){var a=this.e.z.f();this.m();var b=this.element,c=this.Va;C.q.bb(a.src,function(d){function e(q,v,l,u,s){q=c[q].style;q.width=v;q.height=l;q.left=u;q.top=s}function f(q,v,l){for(var u=0,s=q.length;u<s;u++)c[q[u]].imagedata[v]=l}var i=b.offsetWidth,h=b.offsetHeight,g=a.width,k=g.Q.a(b),n=g.O.a(b),m=g.H.a(b);g=g.K.a(b);var p=a.slice,o=p.Q.a(b),r=p.O.a(b),t=p.H.a(b);p=p.K.a(b);e("tl",
g,k,0,0);e("t",i-g-n,k,g,0);e("tr",n,k,i-n,0);e("r",n,h-k-m,i-n,k);e("br",n,m,i-n,h-m);e("b",i-g-n,m,g,h-m);e("bl",g,m,0,h-m);e("l",g,h-k-m,0,k);e("c",i-g-n,h-k-m,g,k);f(["tl","t","tr"],"cropBottom",(d.i-o)/d.i);f(["tl","l","bl"],"cropRight",(d.v-p)/d.v);f(["bl","b","br"],"cropTop",(d.i-t)/d.i);f(["tr","r","br"],"cropLeft",(d.v-r)/d.v);if(a.repeat.Ca==="stretch"){f(["l","r","c"],"cropTop",o/d.i);f(["l","r","c"],"cropBottom",t/d.i)}if(a.repeat.i==="stretch"){f(["t","b","c"],"cropLeft",p/d.v);f(["t",
"b","c"],"cropRight",r/d.v)}c.c.style.display=a.fill?"":"none"},this)}else this.h()},D:function(){this.h();this.d()&&this.u()},m:function(){var a=this.G,b,c,d,e=this.Ub,f=e.length;if(!a){a=this.G=this.element.document.createElement("border-image");b=a.style;b.position="absolute";this.Va={};for(d=0;d<f;d++){c=this.Va[e[d]]=C.q.ja("rect");c.appendChild(C.q.ja("imagedata"));b=c.style;b.behavior="url(#default#VML)";b.position="absolute";b.top=b.left=0;c.imagedata.src=this.e.z.f().src;c.stroked=false;
c.filled=false;a.appendChild(c)}this.parent.ta(this.zIndex,a)}return a}});C.lb=C.p.L({zIndex:1,ia:"outset-box-shadow",B:function(){var a=this.e;return a.A.j()||a.s.j()},d:function(){var a=this.e.A;return a.d()&&a.f().ba[0]},u:function(){if(this.d())for(var a=this.element,b=this.e.A.f().ba,c=b.length,d,e=a.offsetWidth,f=a.offsetHeight,i=["tl","tr","br","bl"],h,g,k,n,m,p,o,r;c--;){h=b[c];k=this.na("shadow"+c,"fill",this.m());n=k.style;d=k.fill;m=h.hc.a(a);p=h.ic.a(a);o=h.$b.a(a);r=h.blur.a(a);n.left=
m;n.top=p;n.width=e;n.height=f;k.coordsize=e*2+","+f*2;k.coordorigin="1,1";k.stroked=false;k.filled=true;d.color=h.color.value(a);m=h.color.Ma();if(m<1)n.filter="alpha(opacity="+m*100+")";if(r){d.type="gradienttitle";d.color2=h.color.value(a);d.opacity=0;g=r*2;h=Math.max(g-e/2,g-f/2);if(h>0)g-=h;h=g/(e+o+r);g=g/(f+o+r);d.focusposition=h+","+g;d.focussize=1-h*2+","+(1-g*2);g=this.e.s.f();if(!g){g={x:{},y:{}};for(d=4;d--;){h=i[d];g.x[h]=g.y[h]=C.g.Ja}}}o=-o-r;k.path=this.la({Q:o,O:o,H:o,K:o},2,g)}else this.h()},
D:function(){this.h();this.u()}});C.kb=C.p.L({zIndex:3,ia:"inset-box-shadow",B:function(){var a=this.e;return a.A.j()||a.s.j()},d:function(){var a=this.e.A;return a.d()&&a.f().oa[0]},u:j(),D:j()})}var E,F,G,I,J,K,L;function update(){init();var a=element.getBoundingClientRect(),b=a.left,c=a.top,d=a.right-b;a=a.bottom-c;var e,f;if(b!==G||c!==I){e=0;for(f=J.length;e<f;e++)J[e].Xa();G=b;I=c}if(d!==E||a!==F){e=0;for(f=J.length;e<f;e++)J[e].u();E=d;F=a}}
function propChanged(){init();var a,b,c=[];a=0;for(b=J.length;a<b;a++)J[a].B()&&c.push(J[a]);a=0;for(b=c.length;a<b;a++)c[a].D()}function mouseEntered(){event.srcElement.className+=" "+C.Fa+"hover";setTimeout(propChanged,0)}function mouseLeft(){var a=event.srcElement;a.className=a.className.replace(new RegExp("\\b"+C.Fa+"hover\\b","g"),"");setTimeout(propChanged,0)}function M(){var a=event.propertyName;if(a==="className"||a==="id")propChanged()}
function cleanup(){var a,b;if(J){a=0;for(b=J.length;a<b;a++)J[a].h();J=null}K=null;if(L){a=0;for(b=L.length;a<b;a++){L[a].detachEvent("onpropertychange",M);L[a].detachEvent("onmouseenter",mouseEntered);L[a].detachEvent("onmouseleave",mouseLeft)}L=null}}
function init(){if(!J){var a=element;a.runtimeStyle.zoom=1;K={I:new C.eb(a),ha:new C.jb(a),z:new C.gb(a),s:new C.hb(a),A:new C.mb(a),Za:new C.qb(a)};var b=new C.ob(a,K);J=[b,new C.lb(a,K,b),new C.db(a,K,b),new C.kb(a,K,b),new C.ib(a,K,b),new C.fb(a,K,b)];var c=element;if(a=c.currentStyle.getAttribute(C.T+"watch-ancestors")){L=[];a=parseInt(a,10);b=0;for(c=c.parentNode;c&&(a==="NaN"||b++<a);){L.push(c);c.attachEvent("onpropertychange",M);c.attachEvent("onmouseenter",mouseEntered);c.attachEvent("onmouseleave",
mouseLeft);c=c.parentNode}}update()}}element.readyState==="complete"&&init();
    </script>

</PUBLIC:COMPONENT>

源码为早期收集，不知出处。

本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2020-03-14/css-ie-border-radius/

如果您觉得文章不错，可以点击文章中的广告支持一下！