基本的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. ORACLE查询当前资产状态,和另一个数据库联查,(查询重复数据中第一条),子查询作为字段查询

    背景:ORACLE查询当前资产状态,包含资产信息(表1),资产维修状态(表2),资产报废状态(表3) 如下: 资产信息:

  2. Servlet、JSP选择题

    Java EE软件工程师认证考试 试题库-选择题   一.    选择题(包括单选和双选) 1.A 对于B/S架构的工作流程,以下说法正确的是(   )(选择一项) A. 浏览器接受用户的输入--&g ...

  3. 幂运算(codevs 2541)

    题目描述 Description 从m开始,我们只需要6次运算就可以计算出m31: m2=m×m,m4=m2×m2,m8=m4×m4,m16=m8×m8,m32=m16×m16,m31=m32÷m. ...

  4. 在Android中将子View的坐标转换为父View的坐标

    在Android中,我们有时候可能会将子View的坐标转换为父View中的坐标.感觉很有用,分享给大家. 在Launcher中有这么一段代码可以完成这项工作.  public float getDes ...

  5. jquery easy ui 1.3.4 按钮(button)(6)

    6.1.linkbutton linkbutton是将一个<a>标签包装成一个能显示图片.文字.的超链接按钮 如何给linkbutton添加一个事件? 使用JQ的方式就能给linkbutt ...

  6. AngularJS深入(5)——provider

    太精彩,不得不全文引用. 到这个层次,可能才敢说自己懂了吧... http://syaning.com/2015/07/21/dive-into-angular-5/ 在使用AngularJS的时候, ...

  7. gui_mainfcn(gui_State, varargin{:});是什么意思

    gui_mainfcn函数执行过程中,要调用各个控件的CreateFcn函数(也就是控件创建的函数)来创建控件.如果对控件的一些属性设置不对,则控件就没法创建,gui_mainfcn函数就不能正确执行 ...

  8. Java中单元测试中:@BeforeClass,@Before,@Test,@After,@AfterClass中的问题详解

    在Junit4中还有的测试注解有:  @BeforeClass ,@Before,@Test,@After,@AfterClass 1.其中:@BeforeClass,@AfterClass是Juni ...

  9. AutoCompleteTextView自动填充文本

    布局: <AutoCompleteTextView android:id="@+id/auto" android:layout_width="match_paren ...

  10. Android UDP

    一.UDP协议全称是用户数据报协议 ,在网络中它与TCP协议一样用于处理数据包,是一种无连接的协议. 1.UDP是一个无连接协议,传输数据之前源端和终端不建立连接: 2.不维护连接状态,包括收发状态等 ...