<!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. demo_01 css3中的radius

    css属性:border-radius :border:边框:radius:弧度:所以这个属性的意思很明了. 下面实现一个小demo: <!doctype html> <html&g ...

  2. asp.net+MVC--1

    1.MVC入门 1)第一个路由: /*任何应用程序启动时发生的动作都应该存在于单独的类中,并且仅在该方法中按照正确顺序调用*/        protected void Application_St ...

  3. PHP学习心得（十）——控制结构

    if 结构是很多语言包括 PHP 在内最重要的特性之一,它允许按照条件执行代码片段. if 语句可以无限层地嵌套在其它 if 语句中,这给程序的不同部分的条件执行提供了充分的弹性. else 延伸了  ...

  4. 摘自淘宝的js地区组件

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

  5. 2011年-CUshell编程大赛

    今天群里有人在做练习时遇到一个问题,$0中的分隔符使用OFS没有成功作用,遂查到这个问题,留作备忘查看 http://bbs.chinaunix.net/thread-2319120-1-1.html

  6. jquery实现替代iframe的功能

    使用iframe能很好的嵌入其他的网页或者网站,但是iframe每次加载都会浪费好多的时间,且会阻止其他元素的加载,搜索引擎也不能识别页面ifram框架中被调用的链接.文本.图片等等内容的. Html ...

  7. js日期范围初始化，得到前一个月的日期

    今天做时间范围的初始化设定,开始时间是当前时间的前一个月,终于找到完美的解决方案了. Date.prototype.format = function(format) {     var o = { ...

  8. 【BZOJ】1006: [HNOI2008]神奇的国度 弦图消除完美序列问题

    1006: [HNOI2008]神奇的国度 Description K国是一个热衷三角形的国度,连人的交往也只喜欢三角原则. 他们认为三角关系:即AB相互认识,BC相互认识,CA相互认识,是简洁高效的 ...

  9. iOS 浅复制、深复制、完全复制的知识点梳理验证(附加归档解档)

    在之前转载的一片文章中,文中对浅复制和深复制进行了详细的解读,同时还提到了深复制(one-level-deep copy).完全复制(true copy)的概念,并指出iOS开发中的深复制是单层深赋值 ...

  10. 1.Bloom filter

    Bloom filter 是由 Howard Bloom 在 1970 年提出的二进制向量数据结构,它具有很好的空间和时间效率,被用来检测一个元素是不是集合中的一个成员,这种检测只会对在集合内的数据错 ...