你所不知道的CSS

-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 {}当提示出现时类似于下面的结构