使用ie-css3.htc实现背景圆角效果

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.box {
background-image: url(Demo.jpg);
height: 165px;
width: 220px;
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari Chrome */
border-radius: 15px; /* Opera 10.5+, Internet Explorer 6+ IE-CSS3 */
-moz-box-shadow: 10px 10px 12px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 12px #000; /* Safari 和 Chrome */
box-shadow: 3px 3px 10px #000; /* Opera 10.5+, IE6+ IE-CSS3 */
behavior: url(ie-css3.htc); /* 对IE-CSS3的引用 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

ie-css3.htc下载链接:http://pan.baidu.com/s/1gdknU3x

查看ie-css3详细信息:http://www.evernote.com/shard/s329/sh/9b193dc6-3bb7-4320-9736-b09c764c1735/72c350c1a668af63172fb53fe1f73457

上面这种对于<img>标签不能达到效果。

使用DD_roundies实现圆角

<!DOCTYPE HTML>
<html>
<head>
<script src="DD_roundies.js"></script>
</head>
<body>
<div class="test" style="background-image:url(2.jpg);width:88px;height:106px;">
</div>
<img src="2.jpg" alt="" class="test"/>
<script type="text/javascript">
DD_roundies.addRule('.test', '10px 10px', true);
</script>
</body>
</html>

DD_roundies下载地址:

  DD_roundies.js:http://pan.baidu.com/s/1o68wluE

  DD_roundies.min.js:http://pan.baidu.com/s/1jGqTwI6

查看DD_roundies详细信息:http://www.evernote.com/shard/s329/sh/a4a78b4f-4551-41a5-88b8-4e0af5adc6b5/5d0f63706de13e6862447f3d936e17df

IE6实现图片或背景的圆角效果的更多相关文章

  1. TImage也有OnClick事件,可以当按钮使用,配上合适的图片(背景透明,效果前凸)更是几乎以假乱真

    本质上TImage与TSpeedButton没有什么区别,都是没有句柄的,但都可以执行OnClick事件.有空分析一下.

  2. Android图片圆角效果

    一般来说图片加圆角可以使用 Java 的方式来进行, 对图片略加处理即可, 但也可以使用纯XML+Nice-Patch图片来进行, 这样的速度会更快. 如果背景是纯色的情况下建议使用此方法. 原理则是 ...

  3. 使IE6同样支持圆角效果

    之前写到过,IE6不支持:hover效果的解决办法,其它这个跟它一样.IE6(7/8)不支持border-radius属性,所以其中的圆角效果显示不出来,可以通过引用ie-css3.htc的方法解决. ...

  4. “蝉原则”与CSS3随机多背景随机圆角等效果

    一.什么是“蝉原则”? “蝉原则”,英文称作“cicada principle”,是一种让事物的重复出现符合“自然随机性”的规则,为什么这么说呢? “蝉原则”源自于北美,中国似乎并未有这样的说法,这背 ...

  5. 处理IE6下PNG图片透明背景问题

    由于历史原因,IE较早的版本不支持PNG透明 可以支持GIF等的透明 由于png图片相对较小,所以很多网站还是青睐于PNG图片 最近就遇到这种情况,使用js和css滤镜来实现的与大家分享一下下: 首先 ...

  6. 圆角效果 border-radius——阴影 box-shadow——为边框应用图片 border-image

    1.圆角效果 border-radius border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角.右上角.右下角和左下角,顺时针 */ 不要以为border-ra ...

  7. 通过IE私有滤镜让IE6 7 8支持背景透明,内容不透明效果。

    CSS3已经支持背景rgba的rgba透明度,这一方法可以避免元素内容也随背景一起变透明(详情请阅http://www.cssha.com/css3-new-knowledge-student).但是 ...

  8. iOS 高效添加圆角效果实战讲解

    圆角(RounderCorner)是一种很常见的视图效果,相比于直角,它更加柔和优美,易于接受.但很多人并不清楚如何设置圆角的正确方式和原理.设置圆角会带来一定的性能损耗,如何提高性能是另一个需要重点 ...

  9. IE6 png图片实现半透明的方法

    IE6中支持PNG半透明图片完美解决方法-divcss5亲測 从IE7及IE7以上版本号都支持PNG半透明格式图片,而只有IE6不支持png格式透明图片,而GIF半透明效果不及png半透明格式图片,由 ...

随机推荐

  1. Dell R710、720等系列类服务器 U盘安装centos6.5 操作系统

    一般全新服务器创建系统的时候,没做raid 会报错,如下: 解决: 开机启动时按F10,进入下面界面. 在LC设置-语言和键盘设置选项里可以选择界面显示的语言 在界面主页选项里选择"配置RA ...

  2. xtrabackup工具

    xtrabackup是基于InnoDB存储引擎灾难恢复的.它复制InnoDB的数据文件,尽管数据文件在内部是非一致性的,但在执行灾难恢复时可以保证这些数据文件是一致的,并且可用. 官方原理 在Inno ...

  3. Meta标签以及viewport

    meta是meta 标签用于网页的<head>与</head>中,meta 标签的用处很多.meta 的属性有两种:name和http-equiv. name属性主要作用:对应 ...

  4. [Leetcode][JAVA] Best Time to Buy and Sell Stock I, II, III

    Best Time to Buy and Sell Stock Say you have an array for which the ith element is the price of a gi ...

  5. poj 3635/hdu 1676 Full Tank? 车辆加油+最短路

    http://acm.hdu.edu.cn/showproblem.php?pid=1676 给出一张图,n<=1000,m<=10000. 有一辆车想从图的一个地方到达另外一个地方,每个 ...

  6. CentOS6.5 解压安装 二进制分发版 mysql-5.5.49-linux2.6-x86_64.tar.gz

    环境:CentOS 6.5 64位 1.下载安装包 http://dev.mysql.com/downloads/mysql/5.5.html#downloads http://dev.mysql.c ...

  7. 发布一个简单的knockout-easyui绑定库

    最近做事情总是南辕北辙,拖延症越发严重了起来.原先计划早就要完成的这个项目也拖延了近两个月后总算勉勉强强发布了(最开始设想的部分功能就这么砍了,好吧纯粹个人太懒) knockout作为老牌的mvvm框 ...

  8. 替换系统数据库解决SQLSERVER服务启动不了的问题

    替换系统数据库解决SQLSERVER服务启动不了的问题 当遇到SQLSERVER服务启动不起来的时候,我们试过把系统的四个数据库master ,model ,tempdb,msdb 替换掉,Windo ...

  9. 开源免费ERP/CRM/SCM:iDempiere 2.0 安装配置

    首先简单介绍一下iDempiere:iDempiere是一款Java平台的基于Compiere/ADempiere的​开源企业级开源ERP/CRM/SCM系统​, 由于是在ADempiere基础上用O ...

  10. 关于oralce字符集问题(复制别人的,纯属自己学习)

    本文主要讨论以下几个部分: 1.如何查看查询oracle字符集. 2.修改设置字符集以及常见的oracle utf8字符集 3.oracle exp 字符集问题 正文: 一.字符集参数 影响Oracl ...