代码改变世界

学习CSS3BUTTON(二)

2013-12-06 10:48  很大很老实  阅读(324)  评论(0编辑  收藏  举报

今天,继续学习其源代码:

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(255,0,0,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 }