zoukankan      html  css  js  c++  java
  • 学习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(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 }

  • 相关阅读:
    腾讯2014 笔试
    iOS 并发编程之 Operation Queues
    iOS 架构
    loadView and viewDidLoad?
    Referring to weak self inside a nested block
    Weakify和strongify探究
    iOS开发的最佳实践
    iOS 书籍
    Object-C非正式协议与正式协议的区别
    解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
  • 原文地址:https://www.cnblogs.com/aomi/p/3460963.html
Copyright © 2011-2022 走看看