<!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. Wix: Using Patch Creation Properties - Small Update

    Source Reference: wix help document  -- WiX Toolset License Using Patch Creation Properties  A patch ...

  2. Web前端新人之CSS样式选择器

    最近在学习css样式.那么我就想先整理一下css样式的选择器 规则结构: 每个规则都有两个基本部分:选择器和声明块.声明块由一个或者多个声明组成,每个声明则是一个属性—值对(property-valu ...

  3. Windows 8上强制Visual Studio以管理员身份运行

    原文链接:http://edi.wang/post/2013/2/28/force-visual-studio-always-run-as-admin-on-windows-8 Windows 8的一 ...

  4. preg_match_all, preg_match

    int preg_match(string $pattern, string $subject[, $arr][, int $flags]);$pattern 正则表达式$subject: 要搜索的字 ...

  5. 我们都忽略了Html5的力量，如果只看成一种技术就大错特错了！

    第一部分:Html5市场的力量 我们太忽略Html5的市场力量了.如果你把Html5当作一种技术,就大错特错了!忘掉你的产品,忘掉你的技术,想想移动时代的信息传播和消费场景.作为2B,我们实在是没有重 ...

  6. AngularJS(1)随笔

    ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者". ng-model 指令把输入域的值绑定到应用程序变量 na ...

  7. 7.MVC框架开发（创建层级项目）

    在一个项目比较大的时候,就会有多个层级项目 1)在项目中选定项目右建新建区域(新的层级项目),项目->右键->添加->区域,构成了一套独立的MVC的目录,这个目录包括Views,Co ...

  8. add a path cgi-bin to asp.net mvc

    1.简单,但是会丢失请求数据 protected void Application_BeginRequest() { string url = HttpContext.Current.Request. ...

  9. pyshp操作shapefile

    ESRI的shp文件自1998发布技术文档以来,shp作为GIS文件的基本交换文件广为使用. 工作中使用shp文件的机会比较多,pyshp是Python操作shapefile的包. 先来说shp文件的 ...

  10. PHP与最丑的后台管理系统

    第二天阿Q到公司还是比较早,同事只有阿梅在,阿Q坐在椅子上旋转来旋转去,有点像个小孩子.公司有书柜,书柜上放了好几本很新的php的书,.net的书反倒比较少而且显得老旧.阿Q起身走过去拿了本php翻了 ...