博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
学习CSS3BUTTON(二)
阅读量:4625 次
发布时间:2019-06-09

本文共 1567 字,大约阅读时间需要 5 分钟。

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

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:不可复制;具体参见:。

 -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 }

转载于:https://www.cnblogs.com/aomi/p/3460963.html

你可能感兴趣的文章
JS验证密码安全级别
查看>>
Cookie是可以覆盖的,如果重复写入同名的Cookie,那么将会覆盖之前的Cookie。
查看>>
Django Models的数据类型
查看>>
博客之初体验-----python初了解
查看>>
jquery.fileupload插件 ie9下不支持上传
查看>>
6.1 HTML5的框架
查看>>
Nginx的500,502,504错误解决方法
查看>>
SAP MM MM17里不能修改物料主数据'Purchasing Value Key'字段值?
查看>>
C#中数组、ArrayList和List三者的区别
查看>>
MVC4 WEBAPI(一)使用概述
查看>>
poj2114 Boatherds
查看>>
maven学习(上)- 基本入门
查看>>
20165231 实验一 Java开发环境的熟悉
查看>>
Solr学习总结(六)SolrNet的高级用法(复杂查询,分页,高亮,Facet查询)
查看>>
对象序列化和反序列化
查看>>
6.10
查看>>
lcd_1602
查看>>
贪心讲解链接
查看>>
vim:隆重推荐括号补全插件--auto-pairs
查看>>
APIO2015简要题解
查看>>