msn email google-talk twitter tumblr flickr




   1  .box {
   2        -moz-border-radius: 15px; /* Firefox */
   3        -webkit-border-radius: 15px; /* Safari and Chrome */
   4        border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
   6        -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
   7        -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
   8        box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
  10        behavior: url(; /* This lets IE know to call the script on all elements which get the 'box' class */
  11      }


   1  .text{
   2    text-shadow: 1px 1px 2px #888888;
   3    behavior: url(;
   4  }
   6  .box{
   7    border-radius: 11px;
   8    behavior: url(;
   9  }
  11  .box{
  12    box-shadow: 10px 10px 10px #000;
  13    behavior: url(;
  14  }

基本就上面三种效果了,每次都要加上这么句behavior.简单测试了下,效果还不错(我对ie的效果要求相当低),加上后是有那么点一劳永逸的感觉 呵 ╯▽╰


behavior: url(...)的写法有点特别,可能习惯background-image: url(...)格式的人就会出这个问题.

You would expect URLs in behavior: url(...) to be relative to the current directory as they are in a background-image: url(...) style for example, but instead Microsoft decided to ignore standards here and make them relative to the docroot instead. So behavior: url( should work if is in the root directory of the site.

意思就是微软给你下个套,behavior: url(不是从当前目录下找htc文件,而是从根目录开始找起.换句话说,behavior: url(写在css里面,htc文件就要放在网站的根目录下.呃…又一个大苍蝇,不过这个是使用htc的老问题了(记得当年的ie6支持png半透明效果的htc也得这么用),习惯就好.


You will probably run into issues with z-index, especially if embedding one IE-CSS3 enabled element inside of another. There are two simple workarounds:

Set the z-index of the IE-CSS3 element to a number larger than its surrounding elements.

Make sure the IE-CSS3 element is positioned, such as with position: relative or position: absolute

Sometimes an IE-CSS3 element will show up at a slightly different position than the original, untouched element. There could be a few reasons for this:

You have broken tags somewhere in your markup, probably above the IE-CSS3 element.

You are experiencing misc IE6 and IE7 bugs. Try adding the styles zoom: 1 and/or position: relative to the IE-CSS3 element and its immediate parent. You could also try removing any margins on the IE-CSS3 element and/or its parent, use padding instead.