Css - 渲染按钮
基本的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 - 渲染按钮的更多相关文章
- 浏览器渲染引擎,提高css渲染速度。
一.渲染引擎渲染引擎的职责是……渲染,也就是把请求的内容显示到浏览器屏幕上.默认情况下渲染引擎可以显示HTML,XML文档以及图片. 通过插件(浏览器扩展)它可以显示其它类型文档. 二.各种渲染引擎我 ...
- 漂亮的自适应宽度的多色彩CSS图片按钮
一.素材 二.效果 三.CSS *{padding:0;margin:0} /*----------------------------------- 自适应宽度图片按钮 ...
- CSS之按钮过滤
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- css中按钮的四种状态
css中按钮有四种状态 1. 普通状态2. hover 鼠标悬停状态3. active 点击状态4. focus 取得焦点状态 .btn:focus{outline:0;} 可以去除按钮或a标签点击后 ...
- CSS实现按钮点击后根据背景色加深效果-一颗优雅草bigniu
具体代码如下 button{ position: relative; } button:active::before { display: block; content: ''; position: ...
- 浏览器加载和渲染html的顺序-css渲染效率的探究
1.浏览器加载和渲染html的顺序1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的.2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都 ...
- 浏览器加载和渲染html的顺序-css渲染效率的探究(转载)
1.浏览器加载和渲染html的顺序1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的.2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都 ...
- 由link和@import的区别引发的CSS渲染杂谈
我们都知道,外部引入 CSS 有2种方式,link标签和@import. 它们有何本质区别,有何使用建议,在考察外部引入 CSS 这部分内容时,经常被提起. 如今,很多学者本着知其然不欲知其所以然的学 ...
- 浏览器加载跟渲染html的顺序-css渲染效率的探究
1.浏览器加载和渲染html的顺序1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的.2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都 ...
随机推荐
- Java for LeetCode 036 Valid Sudoku
Determine if a Sudoku is valid, according to: Sudoku Puzzles - The Rules. The Sudoku board could be ...
- BestCoder9 1003 Revenge of kNN(hdu 4995) 解题报告
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4995 题目意思:在一个一维坐标轴上,给出位置 xi 和值 vi,对于 M 次询问,每次询问给出inde ...
- discuz插件开发新手入门 超详细
作为一个新手,目前也是刚刚玩转discuz的插件功能,好东西不敢独享,就拿出来大家一起分享入门的过程.现在网上很多关于discuz的插件教程都是很简单的教程,原因可能是这个东西是商业化的东西,本着分享 ...
- Java数据类型和运算符
一,数据类型分类(2种) 1. 基本数据类型(3种) 数值型: 整数类型(4种): byte(1字节):范围(-128~127): short(2字节):范围(-32768~32767): int(4 ...
- Linux下循环、选择、顺序操作
1.Shell脚本数组操作小结 http://www.jb51.net/article/52382.htm Linux Shell在编程方面比Windows批处理强大很多,无论是在循环.运算. bas ...
- Linux下创建ftp用户并锁定根目录
[root@d vsftpd]# vi /etc/vsftpd/chroot_list 加入要锁定根目录的ftp用户名(一行只能一个用户) [root@ vsftpd]# vi /etc/vsftpd ...
- 2016国产开源软件TOP100(Q1)
随着互联网的发展.开放标准的普及和虚拟化技术的应用等诸多IT新领域的创新及拓展,开源技术凭借其开放性.低成本.稳定性.灵活性.安全性和技术创新性等特点迅速走向成熟,逐步发展成为一种主流模式,日益改变着 ...
- HTML CSS 中DIV内容居中汇总
转载博客(http://www.cnblogs.com/dearxinli/p/3865099.html) (备注:DIV居中情况,网上谈到也比较多,但是这篇文字,相对还是挺全面,现转载,如果冒犯,还 ...
- ML 03、机器学习的三要素
机器学习算法原理.实现与实践——机器学习的三要素 1 模型 在监督学习中,模型就是所要学习的条件概率分布或决策函数.模型的假设空间包含所有可能的条件概率分布或决策函数.例如,假设决策函数是输入变量的线 ...
- Effective C++笔记:设计与声明
条款18:让接口容易被正确使用,不易被误用 1,好的接口很容易被正确使用,不容易被误用.你应该在你的所有接口中努力达成这些性质. 2,“促进正使用”的办法包括接口的一致性,以及与内置类型的行为兼容. ...