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.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都 ...
随机推荐
- ORACLE查询当前资产状态,和另一个数据库联查,(查询重复数据中第一条),子查询作为字段查询
背景:ORACLE查询当前资产状态,包含资产信息(表1),资产维修状态(表2),资产报废状态(表3) 如下: 资产信息:
- Servlet、JSP选择题
Java EE软件工程师认证考试 试题库-选择题 一. 选择题(包括单选和双选) 1.A 对于B/S架构的工作流程,以下说法正确的是( )(选择一项) A. 浏览器接受用户的输入--&g ...
- 幂运算(codevs 2541)
题目描述 Description 从m开始,我们只需要6次运算就可以计算出m31: m2=m×m,m4=m2×m2,m8=m4×m4,m16=m8×m8,m32=m16×m16,m31=m32÷m. ...
- 在Android中将子View的坐标转换为父View的坐标
在Android中,我们有时候可能会将子View的坐标转换为父View中的坐标.感觉很有用,分享给大家. 在Launcher中有这么一段代码可以完成这项工作. public float getDes ...
- jquery easy ui 1.3.4 按钮(button)(6)
6.1.linkbutton linkbutton是将一个<a>标签包装成一个能显示图片.文字.的超链接按钮 如何给linkbutton添加一个事件? 使用JQ的方式就能给linkbutt ...
- AngularJS深入(5)——provider
太精彩,不得不全文引用. 到这个层次,可能才敢说自己懂了吧... http://syaning.com/2015/07/21/dive-into-angular-5/ 在使用AngularJS的时候, ...
- gui_mainfcn(gui_State, varargin{:});是什么意思
gui_mainfcn函数执行过程中,要调用各个控件的CreateFcn函数(也就是控件创建的函数)来创建控件.如果对控件的一些属性设置不对,则控件就没法创建,gui_mainfcn函数就不能正确执行 ...
- Java中单元测试中:@BeforeClass,@Before,@Test,@After,@AfterClass中的问题详解
在Junit4中还有的测试注解有: @BeforeClass ,@Before,@Test,@After,@AfterClass 1.其中:@BeforeClass,@AfterClass是Juni ...
- AutoCompleteTextView自动填充文本
布局: <AutoCompleteTextView android:id="@+id/auto" android:layout_width="match_paren ...
- Android UDP
一.UDP协议全称是用户数据报协议 ,在网络中它与TCP协议一样用于处理数据包,是一种无连接的协议. 1.UDP是一个无连接协议,传输数据之前源端和终端不建立连接: 2.不维护连接状态,包括收发状态等 ...