学习CSS3BUTTON(二)
今天,继续学习其源代码:
button { margin-left: 0; margin-right: 0; *padding: 5px 5px 3px 5px; }
/*margin-left:设定元素的左外边距;margin-right:设定元素的右外边距。这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。这里的*,主要是针对特定的浏览器*/
a.button { -moz-user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; -webkit-touch-callout: none;}
/*
-moz-user-select:不可复制;具体参见:http://www.cnblogs.com/dudu/archive/2012/04/09/css_unselectable_uncopyable.html。
-webkit-tap-highlight-color:
这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色。
想要禁用这个高亮,设置颜色的alpha值为0即可。
示例
设置高亮色为50%透明的红色:
1 |
-webkit-tap-highlight-color: rgba(,,,0.5); |
-webkit-user-select 和 -moz-user-select
或许你常常不希望用户在你的网站上选择文本,无论是否是出于版权的原因。通常大家会有js来实现,另一个方案就是,将-webkit-user-select 和-moz-user-select 的值设为none。
请谨慎使用这个属性:因为大部分用户是来查看信息的,他们可以复制并存储下来以备将来之用,所以这种方法既无用也无效。如果你禁用了复制粘贴功能,用户还是可以通过查看源文件来获取到他们想要的内容。搞不懂这个属性为什么会被webkit和gecko支持。
*/
button::-moz-focus-inner { border: 0; padding:0px; }
/*
ff下,按钮无需现况的代码。
*/
a.button.primary, button.primary { font-weight: bold }
button:focus,a.button:hover,
button:hover { color: #FFFFFF; border-color: #388AD4; text-decoration: none; text-shadow: -1px -1px 0 rgba(0,0,0,0.3); background-position: 0 -40px; background-color: #2D7DC5; }
a.button:active, button:active,
a.button.active, button.active { background-position: 0 -81px; border-color: #347BBA; background-color: #0F5EA2; color: #FFFFFF; text-shadow: none; }
a.button:active, button:active { top: 1px }
学习CSS3BUTTON(二)的更多相关文章
- crawler4j 学习(二)
crawler4j 学习(二) 实现控制器类以制定抓取的种子(seed).中间数据存储的文件夹.并发线程的数目: public class Controller { public static voi ...
- 从零开始学习jQuery (二) 万能的选择器
本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...
- Android Animation学习(二) ApiDemos解析:基本Animators使用
Android Animation学习(二) ApiDemos解析:基本Animatiors使用 Animator类提供了创建动画的基本结构,但是一般使用的是它的子类: ValueAnimator.O ...
- AspectJ基础学习之二搭建环境(转载)
AspectJ基础学习之二搭建环境(转载) 一.下载Aspectj以及AJDT 上一章已经列出了他的官方网站,自己上去download吧.AJDT是一个eclipse插件,开发aspectj必装,他可 ...
- WPF的Binding学习笔记(二)
原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- MyBatis学习系列二——增删改查
目录 MyBatis学习系列一之环境搭建 MyBatis学习系列二——增删改查 MyBatis学习系列三——结合Spring 数据库的经典操作:增删改查. 在这一章我们主要说明一下简单的查询和增删改, ...
- MyBatis学习 之 二、SQL语句映射文件(2)增删改查、参数、缓存
目录(?)[-] 二SQL语句映射文件2增删改查参数缓存 select insert updatedelete sql parameters 基本类型参数 Java实体类型参数 Map参数 多参数的实 ...
- MyBatis学习 之 二、SQL语句映射文件(1)resultMap
目录(?)[-] 二SQL语句映射文件1resultMap resultMap idresult constructor association联合 使用select实现联合 使用resultMap实 ...
- UML学习(二)-----类图
UML学习(二)-----类图 http://www.cnblogs.com/silent2012/archive/2011/09/07/2169946.html http://www.cnblogs ...
随机推荐
- BOM表生成
- mysqli常用命令
<?php //创建连接 $mysqli=new mysqli("localhost","root","","volunte ...
- Nobel Lecture, December 12, 1929 Thermionic phenomena and the laws which govern them
http://www.nobelprize.org/nobel_prizes/physics/laureates/1928/richardson-lecture.pdf OWEN W. RICHARD ...
- 在Delphi中如何动态创建dbf数据库(二)?
unit Form_ToChangCSVforDBFU; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics ...
- go安装windows源码
直接安装就好,下面是安装地址http://pan.baidu.com/s/1gdDFi9t
- python环境搭建
Python下载 Python最新源码,二进制文档,新闻资讯等可以在Python的官网查看到: Python官网:http://www.python.org/ 你可以在一下链接中下载Python的文档 ...
- Qt使用一个事件队列对所有发出的事件进行维护(QObject的event()函数相当于dispatch函数),用EventLabel 继承QLabel作为例子(简单明了) good
事件(event)是由系统或者 Qt 本身在不同的时刻发出的.当用户按下鼠标.敲下键盘,或者是窗口需要重新绘制的时候,都会发出一个相应的事件.一些事件在对用户操作做出响应时发出,如键盘事件等:另一些事 ...
- 利用select函数的定时返回功能在Windows上实现微秒级的cpu休眠
说明:在调用该函数前要先调用WSAStartup初始化Winsock void uSleep(uint32_t usec) { struct timeval timeout; fd_set fds; ...
- Spring整合CXF之发布WebService服务
今天我们来讲下如何用Spring来整合CXF,来发布WebService服务: 给下官方文档地址:http://cxf.apache.org/docs/writing-a-service-with-s ...
- Javascript实现提示错误的信息直接出现在输入框后
可以在输入框后加个<span id="error"></span>,当验证错误时这样处理document.getElementById('error').i ...