<!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. Headfirst设计模式的C++实现——状态模式(State)

    state.h #ifndef _STATE_H_ #define _STATE_H_ class GumballMachine; class State { public: ; ; ; ; Stat ...

  2. jQuery 1.7以后 jQuery2 新元素绑定事件on替代live

    最近做了一个类别动态加载的功能,jQuery版本用的是2.02. 绑定事件jQuery1.7之前用的是live或者是bind.新版的jQuery新增了on方法 由于子类别是动态加载的,默认是不会有事件 ...

  3. Oracle if else if for case

    ------------------游标+for+if else if DECLARE cursor s_cursor is SELECT * from emp;--定义游标 begin for r ...

  4. power designer

    概述 Power Designer 是Sybase公司的CASE工具集,使用它可以方便地对管理信息系统进行分析设计,他几乎包括了数据库模型设计的全过程.利用Power Designer可以制作数据流程 ...

  5. php用正则表达式获取网站的标题内容

    已知网站的网址,用php获取网站的内容. 编写正则表达式. 用preg_match_all函数获取标题内容. $url='http://www.m-ivi.com'; $content=file_ge ...

  6. Modernizr.js介绍与使用

    Modernizr帮助我们检测浏览器是否实现了某个feature,如果实现了那么开发人员就可以充分利用这个feature做一些工作,反之没有实现开发人员也好提供一个fallback.所以,我们要明白的 ...

  7. PythonCrawl自学日志

    2016-09-10 PythonCrawl自学日志 1.python及Selenium的安装 (1)开发环境使用的是VS2015 Community.python3.5.Selenium3.0BET ...

  8. MVC-Html.Label（TextBox、TextArea、RadioButton、CheckBox）

    红色表示可选参数. @Html.Label("name", "value", new { @class = "class", @style ...

  9. SDC(7) -- 关于使能信号的时序放松

    先看下图: 假如使能信号的有效时间为时钟周期的2倍,此时需要使用 set_multicycle_path 放松使能信号 sel_xy_nab ,若是每个寄存器使能端都约束一遍,那就太麻烦了: 这时可以 ...

  10. iOS上绘制自然的签名-b

    这里有一篇很棒的文章写如何在Android上获取流畅的签名:Smoother Signatures:https://corner.squareup.com/2012/07/smoother-signa ...