移动端 一些实用，冷僻的css

-webkit-touch-callout

概述：

当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。

-webkit-touch-callout 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。

说明：

-webkit-touch-callout：behavior

默认值： default

适用于：链接元素比如新窗口打开，img元素比如保存图像等等

取值：

none：

系统默认菜单被禁用

default：

系统默认菜单不被禁用

• -webkit-touch-callout: default /* displays the callout */
• -webkit-touch-callout: none /* disables the callout */
• -webkit-touch-callout: initial
• -webkit-touch-callout: inherit
• -webkit-touch-callout: unset

* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新

兼容性：

• iOS 2.0及更高版本的Safari浏览器可用
• Android尚不明确

 

-webkit-tap-highlight-color

概述：

当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。

-webkit-touch-callout 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

该属性可以只设置透明度。如果未设置透明度，iOS Safari使用默认的透明度。当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。

说明：

-webkit-tap-highlight-color：color

默认值： inherit

适用于：链接元素比如新窗口打开，img元素比如保存图像等等

取值：

color：颜色值

transparent：透明值

* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新

兼容性：

• iOS 1.1.1及更高版本的Safari浏览器可用
• 大部分android手机也是支持的，只是显示效果有所不同。

-webkit-backface-visibility

隐藏被旋转的 div 元素的背面：

div
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden;    /* Chrome 和 Safari */
-moz-backface-visibility:hidden;     /* Firefox */
-ms-backface-visibility:hidden;     /* Internet Explorer */
}

兼容性

只有 Internet Explorer 10+ 和 Firefox 支持 backface-visibility 属性。

Opera 15+、Safari 和 Chrome 支持替代的 -webkit-backface-visibility 属性。

定义和用法

backface-visibility 属性定义当元素不面向屏幕时是否可见。

如果在旋转元素不希望看到其背面时，该属性很有用。

语法

backface-visibility: visible|hidden;

其他使用的小技巧
链接：https://sanwen8.cn/p/11fAOOp.html