-webkit-font-smoothing: antialiased;

该属性用于设置字体的抗锯齿或者说光滑度，可以让移动端的字体更纤细好看

-webkit-overflow-scrolling: touch;

这个属性用于给scroller增加快速滚动和回弹效果

::-webkit-scrollbar

该属性用于设置滚动条样式
如

  1. ::-webkit-scrollbar    
  2. {    
  3.     width: 6px;    
  4.     height: 6px;    
  5.     background-color: #F5F5F5;    
  6. }

可以设置滚动条尺寸和颜色

  1. ::-webkit-scrollbar    
  2. {    
  3.     display: none;   
  4. }

隐藏滚动条

-webkit-tap-highlight-color

该属性用于设置ios点击样式，这个属性只用于iOS (iPhone和iPad)。

当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。

要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。

想要禁用这个高亮，设置颜色的alpha值为0即可。

  2. -webkit-tap-highlight-color: rgba(0,0,0,0);

多余文本省略号

有时候会遇到这样的需求，在一个元素中显示文本，元素宽度固定，高度为一行，如果文本字数过多，则显示省略号。

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>test label</title>  
  5.     <style type="text/css">  
  6.         #test {  
  7.             display: inline-block;  
  8.             max-width: 260px;  
  9.             overflow: hidden;  
  10.             text-overflow: ellipsis;  
  11.             height: 100%;  
  12.             white-space: nowrap;  
  13.         }  
  14.     </style>  
  15. </head>  
  16. <body>  
  17. <span id="test">  
  18.     123456789012345678901234567890123456789012345678901234567890  
  19. </span>  
  20. </body>  
  21. </html>

3.说明：
display: inline-block 行内元素需要设置改样式，以便设置宽度能生效，如果是块级元素则不需要设置改样式

max-width: 260px 设置最大宽度，文本过多超出这个宽度是会显示省略号

overflow: hidden 设置该样式，以保证文本宽度超出max-width时不会溢出

text-overflow： ellipsis 该样式表示超出元素宽度时，显示方式，ellipsis是省略号

white-space： nowrap 这个样式表示，不折行，即都显示在同一行