<!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. 实现scp自动输入密码（判断yesno选项）

    1.apt-get install expect 2.编写shell脚本test.sh #!/usr/bin/expect -f#!/bin/shset password 1spawn scp roo ...

  2. 安装eclipse中文汉化包后无法打开eclipse

    通过在线安装中文汉化包后一直提示无法启动程序在.log中查看日志 !SESSION 2016-01-15 11:22:57.959 ---------------------------------- ...

  3. Web前端新人笔记之jquery选择符

    jquery利用了CSS选择符的能力,让我们能够在DOM中快捷而轻松的获取元素或元素集合.本章将介绍以下内容: 1.网页中的元素结构: 2.如何通过CSS选择符在页面中查找元素: 3.扩展jquery ...

  4. MembershipProvider的Initialize

    背景 前几天为公司的登陆写密码校验,因为是老系统的东西了,数据已经存在了,所以我要知道密码的校验规则是啥,然后业务经理告诉我了是用Membership去做的加密,让我自己去看.之后我又去问了技术经理, ...

  5. LED字符设备驱动实例及测试代码

    驱动代码如下: #include <linux/kernel.h>//内核头文件 #include <linux/init.h>//__init等 #include <l ...

  6. 上传图片+浏览+裁切 Demo(无后台处理部分)

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. HIVE 的MAP/REDUCE

    对于 JOIN 操作: Map: 以 JOIN ON 条件中的列作为 Key,如果有多个列,则 Key 是这些列的组合 以 JOIN 之后所关心的列作为 Value,当有多个列时,Value 是这些列 ...

  8. 制作第一个UI字体

    为什么要制作UI字体 一般来说,会有系统默认字体共我们使用,但是出于以下两个原因我们经常会需要制作独特的字体. 1.系统字体的风格和美观程度等无法满足需求. 一般来说,系统字体都比较死板.生硬,风格单 ...

  9. 【转载】Java 升级到jdk7后DbVisualizer 6 启动空指针的处理方案

    将JDK从6升级到了7(或从其他电脑移植DBV文件夹后),每当启动DbVisualizer 6的时候都会报空指针异常 在官网上找到了相关的方案,如下: In the DbVisualizer inst ...

  10. jQuery滑动导航菜单

    js: $(function(){ $("ul.sub").parent().append("<span></span>"); $(&q ...