webkit内核浏览器的CSS写法_html/css_WEB-ITnose

-webkit-tap-highlight-color: transparent; Mobile上点击链接高亮的时候设置颜色为透明

-webkit-user-select: none; 设置为无法选择文本

-webkit-touch-callout: none; 长按时不触发系统的菜单, 可用在图片上加这个属性禁止下载图片

:-webkit-full-screen canvas {} 全屏模式时的样式(for Desktop)

div p :matches(em, b, strong) {} 使用mathes来匹配多个选择器

@media only screen and (max-width: 480px) {} 指定Mobile设备或者小屏幕桌面屏幕

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 300dpi) { 指定高分辨率屏幕设备

header { background-image: url(header-highres.png); }

}

@media (-webkit-max-device-pixel-ratio: 1.5),(max-resolution: 299dpi) { 指定低分辨率屏幕设备

header { background-image: url(header-lowres.png); }

}

background-repeat: space; background-repeat: round; 这两种CSS3的背景属性值得研究

width: calc(100%-40px); 计算宽度

text-decoration: #FF8800 wavy ine-through; 波浪型链接

text-rendering: optimizeLegibility; 用这个属性之后会收紧字符间的距离

font-variant-ligatures: common-ligatures; 设置CSS连字

transform: rotate(90); 旋转90度

transform-origin: center center; transform-origin可以改变变换的位置

-webkit-appearance: none; -webkit-appearance可以改变按钮或者其它控件看起来类似本地的控件

美化表单校验时的提示样式

::-webkit-validation-bubble {}

::-webkit-validation-bubble-message {}

::-webkit-validation-bubble-arrow {}

::-webkit-validation-bubble-arrow-clipper {}当提示出现时类似于下面的结构

查看更多关于webkit内核浏览器的CSS写法_html/css_WEB-ITnose的详细内容...