基本的css3按钮渲染

<style type="text/css">
            background: #f7f7f7;
            /* for Webkit */

            background: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e9e9e9));
            /* for Firefox */

            background: -moz-linear-gradient(top, #f7f7f7, #e9e9e9);
            /* for IE */

            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#e9e9e9');
            #breadcrumbs {
                display: inline-block;
                padding-right: 20px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                -ms-border-radius: 3px;
                -o-border-radius: 3px;
                border-radius: 3px;
                -webkit-box-shadow: 0 0 0 1px #ccc inset, 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 1px rgba(255, 255, 255, 0.6) inset;
                -moz-box-shadow: 0 0 0 1px #ccc inset, 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 1px rgba(255, 255, 255, 0.6) inset;
                box-shadow: 0 0 0 1px #ccc inset, 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 1px rgba(255, 255, 255, 0.6) inset;
                background: #ececec;
                background-size: 100%;
                background-image: linear-gradient(top, #fafafa, #ececec);
                width: 100%;
            }

            -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
            -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
            color: #fef4e9;
            border: solid 1px #da7c0c;
            background: #f78d1d;
            background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
            background: -moz-linear-gradient(top, #faa51a, #f47a20);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#faa51a, endColorstr=#f47a20);
            cursor: pointer;
            zoom: 1;
        </style>

Css - 渲染按钮的更多相关文章

  1. 浏览器渲染引擎,提高css渲染速度。

    一.渲染引擎渲染引擎的职责是……渲染,也就是把请求的内容显示到浏览器屏幕上.默认情况下渲染引擎可以显示HTML,XML文档以及图片. 通过插件(浏览器扩展)它可以显示其它类型文档. 二.各种渲染引擎我 ...

  2. 漂亮的自适应宽度的多色彩CSS图片按钮

    一.素材               二.效果 三.CSS *{padding:0;margin:0} /*----------------------------------- 自适应宽度图片按钮 ...

  3. CSS之按钮过滤

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. css中按钮的四种状态

    css中按钮有四种状态 1. 普通状态2. hover 鼠标悬停状态3. active 点击状态4. focus 取得焦点状态 .btn:focus{outline:0;} 可以去除按钮或a标签点击后 ...

  5. CSS实现按钮点击后根据背景色加深效果-一颗优雅草bigniu

    具体代码如下 button{ position: relative; } button:active::before { display: block; content: ''; position: ...

  6. 浏览器加载和渲染html的顺序-css渲染效率的探究

    1.浏览器加载和渲染html的顺序1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的.2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都 ...

  7. 浏览器加载和渲染html的顺序-css渲染效率的探究(转载)

    1.浏览器加载和渲染html的顺序1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的.2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都 ...

  8. 由link和@import的区别引发的CSS渲染杂谈

    我们都知道,外部引入 CSS 有2种方式,link标签和@import. 它们有何本质区别,有何使用建议,在考察外部引入 CSS 这部分内容时,经常被提起. 如今,很多学者本着知其然不欲知其所以然的学 ...

  9. 浏览器加载跟渲染html的顺序-css渲染效率的探究

    1.浏览器加载和渲染html的顺序1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的.2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都 ...

随机推荐

  1. putty mtputty 设置utf8编码

    2013年10月30日 10:02:36 先load你指定的ip 然后选择左侧目录中的windows->translation 再在右侧选择utf-8编码 选中后,点击左侧目录中的session ...

  2. August 1st, 2016, Week 32nd Monday

    Laughing is the most touching mask. 笑容是最动人的面具. I used to be very weclome in those I had met. And the ...

  3. 谈谈如何在面试中发掘程序猿的核心竞争力zz

    早两天看了知乎日报的这篇文章<什么是程序员的核心竞争力?>,caoz讲的几点是让我感同身受.这让我联想起了给程序猿的面试,其实也就是通过短暂的接触来发掘程序猿的核心竞争力.接下来我就谈谈我 ...

  4. js 完全分离 window.onload=

    js 完全分离  window.onload= <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ...

  5. poj 1019

    懂了 题意是给一串 1 12 123 1234 12345 123456 ....这样的数字问第 i个数字是多少 Sample Input 2 8 3 Sample Output 2 2 #inclu ...

  6. selector选择器

    <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="ht ...

  7. python map函数

    map()函数 map()是 Python 内置的高阶函数,它接收一个函数 f 和一个 list,并通过把函数 f 依次作用在 list 的每个元素上,得到一个新的 list 并返回. 例如,对于li ...

  8. 3.PopupWindow 、拍照、裁剪

    实现这样的效果 圆角图片的自定义控件直接拷进来,和com一个等级 想要弹出内容可以使用悬浮窗 layout_pupup <LinearLayout xmlns:android="htt ...

  9. H5开发之Eclipes 编码乱码问题

    1.编码不对 a.对某文件或某工程更改编码: 鼠标移到工程名或文件名,右键->Properties->Resource->Text file enCoding ->更改编码(G ...

  10. QUnit使用笔记-5简化编写

    在测试中,如果用到了大量相同的方法返回判断结果,可以将他们简化; 使用push(): push( result/*boolean,result of assert*/, actual, /*objec ...