webkit的一些不为人知的高级属性

时间:2022-08-06 20:50:11

1.-webkit-tap-highlight-color
tap按钮或者链接时,就会出现一个半透明的灰色背景,设置属性:
-webkit-tap-highlight-color:transparent

就不会出现半透明的灰色背景。

2.-webkit-touch-callout
  当你触摸并按住触摸目标时候,禁止或显示系统默认菜单:-webkit-touch-callout
  例如:在IOS上你触摸到a标签,将会显示链接有关的系统默认菜单,譬如会出现的颜色。设置为none,则禁止显示链接有关的系统默认菜单。
3.-webkit-appearance: none
  禁止输入框中的默认样式: -webkit-appearance: none;
4. -webkit-user-select
  不希望用户在你的网站上选择文本,无论是否是出于版权的原因.通常大家会有js来实现,
  另一个方案就是,将-webkit-user-select 和-moz-user-select 的值设为none。
5. -webkit-text-size-adjust
  网页字体缩放样式
6. -webkit-overflow-scrolling: touch
  目前只能针对IOS出现滚动条
7.perspective属性

目前只有safari和chrome浏览器支持 -webkit-perspective,单位为像素。

{
-webkit-perspective:500
}

perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。