<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

 <style type="text/css">

     body {

         margin:;

     }

    div

     {

                behavior: url(../js/PIE.htc);

                border: 10px solid green;

                 -webkit-box-shadow: inset 0px 1px 0px rgba(, , , 0.5), 0px 1px 2px rgba(, , , 0.2);

  -moz-box-shadow: inset 0px 1px 0px rgba(, , , 0.5), 0px 1px 2px rgba(, , , 0.2);

  box-shadow: inset 0px 1px 0px rgba(, , , 0.5), 0px 1px 2px rgba(, , , 0.2);

  background-color: #eeeeee;

  background: -webkit-gradient(linear, % %, % %, color-stop(%, #fbfbfb), color-stop(%, #e1e1e1));

  background: -webkit-linear-gradient(top, #fbfbfb, #e1e1e1);

  background: -moz-linear-gradient(top, #fbfbfb, #e1e1e1);

  background: -o-linear-gradient(top, #fbfbfb, #e1e1e1);

  background: linear-gradient(top, #fbfbfb, #e1e1e1);

  display: -moz-inline-stack;

  display: inline-block;

  vertical-align: middle;

  *vertical-align: auto;

  zoom: ;

  *display: inline;

  border: 1px solid #d4d4d4;

  height: 32px;

  line-height: 32px;

  padding: 0px .6px;

  font-weight: ;

  font-size: 14px;

  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

  color: #;

  text-shadow:  1px 1px white;

  margin: ;

  text-decoration: none;

  text-align: center;

            }

.button {

  -webkit-transition-property: background, color;

  -moz-transition-property: background, color;

  -o-transition-property: background, color;

  transition-property: background, color;

  -webkit-transition-duration: .3s;

  -moz-transition-duration: .3s;

  -o-transition-duration: .3s;

  transition-duration: .3s;

  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  box-shadow: none;

  background: #00a1cb;

  color: white;

  text-shadow: none;

  border: none;

  cursor:pointer;

}

.button-rounded {

  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  -ms-border-radius: 3px;

  -o-border-radius: 3px;

  border-radius: 3px;

}

.button:hover {

  background: #00b5e5;

}

/* line 183, ../scss/button.scss */

.button:active {

  background: #1495b7;

  color: #00647f;

}

.button.disabled {

  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  box-shadow: none;

}

        </style>

</head>

<body>

<p>Test passes if there is a box with rounded corners below.</p>

        <div class="button button-rounded">Filler Text</div>

        <input type="button" value="提交" class="button button-rounded" style="width:50px; height:22px;">

</body>

</html>

behavior: url(../js/PIE.htc);

这个引用htc文件的，指的是html页面相对于这个htc文件的路径，而不是css相对于htc文件的路径。

具体源码的下载

百度云网盘的地址：

　　　　　　

js制作圆角按钮（兼容谷歌，ie7，ie8）的更多相关文章

  1. 兼容IE6/IE7/IE8/FireFox的css hack

    兼容IE6/IE7/IE8/FireFox的css hack .color{ background-color: #CC00FF; background-color: #FF00009; *backg ...

  2. [转载]使用兼容ie6 ie7 ie8 FF的text-overflow:ellips

    使用兼容ie6 ie7 ie8 FF的text-overflow:ellipsis超出文本显示省略号来代替截取函数更有利于seo,如果使用截取函数,源代码中的标题是显示不完整的,即便是在title属性 ...

  3. 给Select赋值 innerHTML 不兼容IE6\IE7\IE8\IE9

    <select class="b-select" id="location-province" name="Province" def ...

  4. 下拉菜单select高度（兼容IE6/IE7/IE8/火狐等主流浏览器）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. CSS兼容IE6 IE7 IE8 IE9 Firefox的总结

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 最新区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法和Css if hack条件语法操作说明

    自从安装了IE8.0正式版本!木头 就对基本的几个 CSS HACK的做一下归纳!希望对网页前端布局DIV+CSS的实施者有所帮助! 本文就主要以:IE6+IE7+IE8+IE9+FF为主要研究对象 ...

  7. 区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法

    HACK原理:不同浏览器对各中字符的识别不同 在 CSS中常用特殊字符识别表: (1)*:  IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的; (2)!important: 除IE6 ...

  8. CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法

    关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HA ...

  9. css滑动门制作圆角按钮

    之前做项目的时候,基本都是将圆角背景图切成三块,故而每次用的标签都超级多,a标签中总是包含三个span,然后里面还得放按钮,导航冗余标签极多. 事实上是之前理解的滑动门的精髓不够到位. 现在有两种方式 ...

随机推荐

  1. [技术翻译] 构建现代化的Objective-C (下)

    我的技术博客经常被流氓网站恶意爬取转载.请移步原文:http://www.cnblogs.com/hamhog/p/3563880.html,享受整齐的排版.有效的链接.正确的代码缩进.更好的阅读体验 ...

  2. iOS 分类思想(1)

    1.需求:如果对一个类在不更改代码的基础上要为它再扩充额外的方法可以使用继承和分类 2.分类 作用:可以在不修改原来类代码的基础上,给某一个类扩充一些对象方法或者类方法,因此一个类可以有多个分类 实现 ...

  3. 通过 ANE(Adobe Native Extension) 启动Andriod服务 推送消息(四)

    这一节,是要把AS库和Android的jar包及相关配置文件打成一个ane包. 首先先建一个build目录,里面文件目录结构如下: 然后用打开压缩包的方式打开ServiceLib.swc, 把其中的l ...

  4. csdn博客刷粉代码

    原理是当有访客访问博客时,执行js实现自动加粉丝,达到刷粉的目的. <script src="http://code.jquery.com/jquery-1.4.1.min.js&qu ...

  5. 前端资源多个产品整站一键打包&包版本管理（三）—— gulp分流

    问题: 当我们一个工作台里面有好几个项目的时候,我们要为项目的前端资源进行打包,但是,gulpfile只有一个,如果我们把所有的打包都放在同一个文件里面,首先文件会越来越大,而且不便于管理,这时,我们 ...

  6. opcache运行时配置参数详解

    PHP的opcode缓存又出 了新成员(说新不新,也有一段日子了),那就是opcache.新浪微博等都在使用,惠新宸老师强力推荐.本人最近根据官网地址 (http://www.php.net/manu ...

  7. php结合jquery异步上传图片（ajaxSubmit）

    php结合jquery异步上传图片(ajaxSubmit),以下为提交页面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ...

  8. css helper class

    应该习惯的css helper class .text-centered text-align: center; .text-right text-align: right; .small small ...

  9. C#常用正则过滤

    //string regexstr = @"<[^>]*>"; //去除所有的标签 //@"<script[^>]*?>.*?< ...

  10. 增加字体和颜色样式-------CSS

    通过使用CSS,控制文本的字体,风格和颜色 1.基本操作: body{ font-family: Verdana, Geneva, Tahoma, sans-serif } body{ font-si ...