比较陌生的css

Posted 2020-07-28 luoyiming

网页字体缩放样式-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点击动作触发的事件