我今天写了一个关于圆角的帖子,后来觉得写的实在是不咋地。方法也很繁琐落后,有人推荐了我一个工具叫做piecss,于是尝试着去用。
piecss这个插件是针对于ie浏览器不支持css3而做的。他可以让ie也实现css3的某些特性,比如阴影,圆角等。现在我们就来说一下圆角。
下载piecss(本页面提供下载)。
加到网站目录下。
然后在需要用到圆角的地方,写如下代码
.xo-blocktitle {
height: 35px;
background: url("../img/content_bar.png") repeat-y;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
behavior: url(/shbank/include/me/piecss/PIE.php);
}
这里的behavior的路径我这里是绝对路径,因为behavior的路径比较特别,保险我就写了绝对路径。这里的PIE.php会把PIE.htc返回来。
-moz-border-radius还有-webkit-border-radius是针对ff和opera的吧。这个不谈。
这样子简简单单,效果就出来了,爽爆了。
接下来就是透明png图片的问题。我这里用滤镜的方法。
.xo-blocktitle h3{
background-image:url(img/btitle_1.png) !important;
background-image:none;
background-repeat:no-repeat;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/btitle_1.png);
}
如果不在滤镜前加_,就会出现ff下无法正常显示的问题。所以用hack。而如果不用!important直接指定background-image(为了ff能显示背景),那么ie6下png图片又是不能正常显示,所以只能这么写了。聪明的读者应该能琢磨出来的。
分享到:
相关推荐
让IE6、IE7、IE8支持CSS3的圆角、阴影样式.
解决css3圆角特性不兼容ie6,ie7,ie8等问题,让ie9一下版本完美兼容css3圆角。实现非常简单
css3.htc 兼容IE8圆角 需引入的文件 css3.htc 兼容IE8圆角 需引入的文件 css3.htc 兼容IE8圆角 需引入的文件
兼容各种版本浏览器圆角的各种方法
解决IE不兼容css3圆角和阴影问题
CSS3实现圆角阴影渐变效果兼容IE,火狐等主流浏览器,用过都说很好用,你懂的。
DIV+CSS IE圆角,让IE也能支持圆角
css3圆角支持火狐、IE和webkit
CSS使用图片完美修饰的全兼容圆角框.rarCSS使用图片完美修饰的全兼容圆角框.rarCSS使用图片完美修饰的全兼容圆角框.rarCSS使用图片完美修饰的全兼容圆角框.rarCSS使用图片完美修饰的全兼容圆角框.rarCSS使用图片完美...
《解决IE浏览器图片圆角》解决在IE6-IE8浏览器图片的圆角问题;可以设置图片的大小;还必须大于50字
本文我们主要是讲解如果用CSS 3样式表来实现圆角效果,值得注意的是,IE6/7/8这三个IE浏览器版本都不支持CSS 3的解析,只有还不太主流的IE 9支持CSS 3和HTML 5的标准。让IE支持CSS 3的解析方法有很多种,下面介绍...
纯CSS实现的图片圆角边框效果,兼容IE6.
运用css技术就能显示出圆角的效果,避免用图片在ie6中显示边边角角的问题,与图片透明不足的效果交替。
使用方法:将方法添加到Image类中,直接调用使用 使用场景:在二维码上添加logo,带使用实例
DIVCSS5圆角实例 CSS3版本圆角实例, 支持低版本IE6-IE9浏览器
本地测试有ActiveX控件提示不必在意; 上传到服务器上,用iis调试打开,就不会弹出安全提示
老外做的,做得挺好的 只用加载一个简单的js,就可以实现圆角图片 还有其它的东西,大家可以去他的官网看看
圆角兼容所有浏览器方法
支持IE6,IE7,IE8矩形圆角的实例