比较陌生的css

网页字体缩放样式-webkit-text-size-adjust的用法详解

1、当样式表里font-size<12px时，中文版chrome浏览器里字体显示仍为12px，这时可以用 html{-webkit-text-size-adjust:none;}
2、-webkit-text-size-adjust放在body上会导致页面缩放失效
3、body会继承定义在html的样式
4、用-webkit-text-size-adjust不要定义成可继承的或全局的

 

css3属性-webkit-font-smoothing

CSS3里面加入了一个“-webkit-font-smoothing”属性。

这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。

加上之后就顿时感觉页面小清晰了。 淘宝也在用哦！

它有三个属性： 

none                                     ------ 对低像素的文本比较好 

subpixel-antialiased                ------默认值 

antialiased                             ------抗锯齿很好  

body{ 

-webkit-font-smoothing: antialiased; 

} 

 

国外某网站例子

-moz-osx-font-smoothing: inherit | grayscale

这个属性也是更清晰的作用，特别是图标文字流行的今天。

 

 

CSS3 overflow-style 属性

设置溢出元素的首选滚动方法：

div
{
overflow:auto;
overflow-style:marquee,panner;
}

CSS3 appearance 属性

使 div 元素看上去像一个按钮：

div
{
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari 和 Chrome */
}

cursor:not-allowed 的使用

鼠标样式 not-allowed，是一个红色的圈加一个斜杠，表示禁止的意思，似乎IE，chrome firefox 都能够正常显示，很好用

 

CSS里的pointer-events属性

现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清。比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框。而本文要说的pointer-events的风格更像JavaScript，它能够：

• 阻止用户的点击动作产生任何效果
• 阻止缺省鼠标指针的显示
• 阻止CSS里的hover和active状态的变化触发事件
• 阻止JavaScript点击动作触发的事件

-ms-touch-action

---------------   在IE10下给元素增加触控效果 

 

• auto                        默认值，允许浏览器给元素添加touch行为
• none                       不允许默认的touch行为
• pan-x                      允许水平轴触摸驱动的平移
• pan-y                      允许垂直轴触摸驱动的平移
• pinch-zoom             允许拖拽缩放 
• manipulation           允许触摸驱动的平移和拖拽缩放
• double-tap-zoom     允许整个页面双击缩放指定元素
• inherit                      继承父元素的值

CSS outline 属性

设置 4 个边框的样式：

p
  {
  outline:#00FF00 dotted thick;
  }

CSS3 outline-offset 属性

规定边框边缘之外 15 像素处的轮廓：

div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

-webkit-overflow-scrolling : touch;

现在很多for Mobile的H5网页内都有快速滚动和回弹的效果，看上去和原生app的效率都有得一拼。

可以用手指滑动中间的蓝色区域，会发现回弹效果以及滚动得很快：

如果把-webkit-overflow-scrolling那行注释掉，就会发现滚动得很慢。