Windows 8的最终版本即将上市了，新的Metro（Windows 8 Style UI）界面吸引了不少眼球，与此同时微软也各种相关网站上实现着相同或者相似的效果。最新版的Outlook便采用了Metro，界面简洁大方。

Metro效果的新Outlook

可以看到，在Windows 7下的Chrome浏览器中，Outlook依然能够显示Windows 8风格滚动条。

我之前曾经写过一篇日志讲述如何添加Gmail风格的滚动条，微软采用了同样的技术实现了类似效果。值得一提的是，其中使用的-webkit-scrollbar等一系列CSS3伪元素是Webkit内核浏览器才支持的（Chrome等），在Internet Explorer下不会显示此效果。可见微软这次考虑到了市场份额越来越大的Chrome，开始“讨好”Chrome用户了。

通过分析Outlook的源代码我提取出了相关代码，如果希望自己的网站也显示Windows 8风格的滚动条可以在CSS文件中添加如下代码：

::-webkit-scrollbar {
    width:17px;
    height:17px;
    background-color:#f0f0f0;
    border:none
}
::-webkit-scrollbar-thumb {
    background-color:#cdcdcd;
    border:1px solid #f0f0f0
}
::-webkit-scrollbar-thumb:hover {
    background-color:#dadada
}
::-webkit-scrollbar-thumb:active {
    background-color:#606060
}
::-webkit-scrollbar-thumb:disabled {
    background-color:#f9f9f9
}
::-webkit-scrollbar-corner {
    background-color:#f0f0f0
}
::-webkit-scrollbar-button {
    background-color:#f0f0f0;
    background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAMGCAYAAAAQo795AAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAACY1JREFUeNrsnU9IXEkex7/vqX0QmxDFsMnCkHQOEXRgIDCwaJAcnrgILiyZsJcd0pdIYIT3DgsZFgY2zDBzWZ6YQ0gO3WGXhUz+9GHZsIPvEMcY1suAMLbkkk4Y2ERiNB2MDf5paw5W9/Q8X9Wrev1M1P4VSPB11cd69av61u/3Kyvi4sWLjDGGOP41GGOIq5gjIyOx0EZGRqhn1DPqGfXsffYMe1dpEWMhGMEIRjCCNS6sufYbz/O0tyrLsoxAGP9QGeR5HlmTYASDcDn5l4hOITf0wE6NVCqlbdpCoWCQAQhGsL0NI9kmb1vV2+7u7lYG5fN5sibBCCb2tv1LhGSbpgaAsbExbdPati2Wbdu2lUFjY2NkTYIRTCzb/iVCst2osEYujLHALwBNAP4L4Os4DPAFgEEAb3QaJQCc9vVqCAADcEd3CeYAlAD084anABQB5AG06cKGAaxx4BCHFAGcqumpugFqgIx/DfteW8+aNcC/BVhWf2oA+BhAkwrMkLymXFUNg/SMYASTOy6y4jhOE4D/AJgF8PmuyrYhCGESAD50XfeHml4N8V7ddV33E52FfgvAQ8dx+jnoFIB/AZgHkNY1wM3KtsZ7lOPP/+i67luhLIn0zHGcYQB3+E4FAH9wXfffkfSMN/wEwDqAK7WgSPOMA84AuKLk05JsE4xg7wv2nr1txliCMXba5+ANse1yR9dzzDHGSoyxfg46xRgrMsbyjLE2XdgwY2yNA4c4pMihkXzaCrBShut1kCvAeLxtxtjHjLGmyDAq765QLohgUVz37u7uHfMmn88bZABamwQjGMH2pGw7jsMCQm2SbZJtghGMYHtTtrF9rLZDacgA784ABo0ZwRpzBWSz2Q+xnZf9HYDfAvg/gP8BuJJOp39U8oKy2WwCwF8AfGFZVuLIkSNIJBJYX1/Hy5cv4XneOrZPe75Jp9PlX6ufL5eYyWSuzs/Ps7W12kToL2VtbY3l83mWyWSu7shD+kB9k5OTbGtri8nK1tYWm5ycZJlMpq+2vd8Al7q6ugLPlH41NoaBrq4uALgks2b/4cOHlSzH6/XLYJ3NzWqHsbxepwy2uLm5qQTj9RZlsO9fv36tBOP1vpfBrj1+/FgJxutdC5tn1+fn59nGxkbgtNjY2GDz8/Msk8lc97cNGu3RmZmZxZmZmcsDAwNNnZ2d1RWwuLiIiYmJMoBvEHDmKQwqstnsRwD+CqAPwG8ALACYBvBVOp2e3fUIxaiMW2ywWmNoA2qWXqPLdiqVEsp2oVD4UckAqVSqKtv45VcFaktVtguFQrnWAEE9+zuAzyRvkwDwJZ/Io8KenThxog/AQ41hOvP06dNpkQEuaY65XLY1YXLZ1oTJZVsTJpdtTZhctjVh14SwQqEwDeCGIugGry9dm6MAvgJQFkDK/PNRZT1LpVJC2S4UCrNBekbi2BCy7XmeULYty1KTbc/zqrJ99OjRRDKZREtLCzY2NrCysoIXL15UZduyrHDZ7ujo+KyjowMtLS3Vhy0tLWhvb0cymUy8evXqy+XlZblsT0xM9LW2tj48fvy41ElmjOHZs2colUpnBgYGxLLd3t6u5G23t7eHy3Zra6uS5Xi9/eptl0olJRivJ5ft5eVlJRivJ5Zty7KmS6XSjYWFBZTLwUJbLpexsLCAUql0w7Ks6bDlNLq0tLS4tLR0+dixY03JZBLNzc3Y3NzEysoKnj9/Lva2RUrreZ5Qti3LamTZbpBjD+GqdhxHKNuu66olSRzHqcr2uXPnEj09PTh06BDevHmDubk53L17tyrbruvKkyS2bV/N5XKsWCwGBq/FYpHdu3eP2bYtT5LYtt03Pj7OyuWyNElSLpfZ+Pg4s21bniTp7e2FacrtYpoment7w2X75MmTSpbj9eSy3dbWpgTj9eSy/fbtWyUYryeX7SdPnijBeD25bD969EgJxutdC5tn13O5HFtdXQ2cFqurqyyXyzHbttWSJFNTU4tTU1OXz58/39TT04NkMomVlRXMzc3h9u3b+kkSx3GEsu267mwD6xnBGiUXVPW0AJwA8BSAxyNmPVgl9QjgQs33/wTwaZTXHPSBAODP/Lk27CPB89NRYLOC5z9EgX0H4Fvfs2/580gG+BMf9A8A/ATgfqSpUVPuk7NHMILtHdmucWCqsu26rhd5bTqOs0O2Xdf9VBvmOM4gti/9+MvvXdf97oDINn+VHbItekUlceT3Nz8A8JPruvdJaQlGsAMo20HetrCI/jMT/pX1RdX/kNWXgQYF2ZtBUZu9K9thY3bL94q3ZPVVlHZI1dsm2SYYwWIrxoULF2jMCHYgYSwuGFMFmpo9YlFhTPeVTcUGhgrQ1ACFAsPGzAj5XhlmaD4XwgzNHgthqlcfDFroBCMYwdS3NR2lZbqgd7Y7xbZvGoo7urLShm1rhu5rxrY7xb5vhu3okVeAEWkF3Lx5U4keVM9UrajyuanbQPaDTJ0ehPV4B8wf5VUAflBQNCgMEWW9ELUxdRvI4lPpmPkbhgW6oZO2AlCJmCmsJhjBYiuq/9lt3ZuwFiiK4xJ5E9YC1RPwR3ZDjXqmhlLaoZ4Yve5ckDZQ1z9j9S4nZaDqcjL2t2oQbA/Ldmx6dsDWZtTYidVrzbrztFrWNeMCNdCO3lyvVDegBNGvCxCMYAQjWFSYYRjxnKNXQCpAU6dHYUBT99VkQFOlAWPMUAGaqiAVoHTM/AD/98owUUMZ0NRtIPucdnSCEYxgdaYiuIKqxE3ML0V0jr4DQOfoeoX+ag8VKvu4kBtKsP3vBUUJZrUD/sghYhSQVsAfBooc8CvDooICYapph8gxet25oChArbxG5FxQFCDtAQR7r7Idm54dvLWpZIDIedp6gMowFeuacYEaaEcn2SYYwQhGMIK9UxjdRw+H0X10uo9OMIIRbN/A6D46naOjce+jh/2ZHFk9U7WiyuembgPZDzJ1ehDW46CTikCAHxSUqRGmb8L+8JHWa4oayHJHYdlQZZDSpK0AVLJZlPIiGMFiK3Qfne6j1xmj0310/eVE99EJtluyTffR442d6D76gd/R6T46wQhGMM1NeHJyksaMYHXA6By9/rCaztH1nRY6RycYwQi2SzA6R6dzdDTuOfrZs2eV6EH1TNWKKp+bug1kP8jU6UFYj3fAHjx4EAjwg/z1AMAIehjWC1EbU7eB6HnomPkbykBKk7YCCANJx4y2OoIRTLfQOTqdo9cZo9M5uv5yonN0gu2WbNM5eryxE52jH/gdnX45V7/8PACU9JzsQmv6nwAAAABJRU5ErkJggg==");
    background-repeat:no-repeat
}
::-webkit-scrollbar-button:vertical {
    height:33px
}
::-webkit-scrollbar-button:horizontal {
    width:33px
}
::-webkit-scrollbar-button:horizontal:increment {
    background-position:0 -444px
}
::-webkit-scrollbar-button:horizontal:decrement {
    background-position:12px -425px
}
::-webkit-scrollbar-button:vertical:increment {
    background-position:-1px -391px
}
::-webkit-scrollbar-button:vertical:decrement {
    background-position:-1px -358px
}
::-webkit-scrollbar-button:hover {
    background-color:#dadada
}
::-webkit-scrollbar-button:horizontal:increment:hover {
    background-position:0 -548px
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
    background-position:12px -529px
}
::-webkit-scrollbar-button:vertical:increment:hover {
    background-position:-1px -495px
}
::-webkit-scrollbar-button:vertical:decrement:hover {
    background-position:-1px -462px
}
::-webkit-scrollbar-button:active {
    background-color:#606060
}
::-webkit-scrollbar-button:horizontal:increment:active {
    background-position:0 -652px
}
::-webkit-scrollbar-button:horizontal:decrement:active {
    background-position:12px -633px
}
::-webkit-scrollbar-button:vertical:increment:active {
    background-position:-1px -599px
}
::-webkit-scrollbar-button:vertical:decrement:active {
    background-position:-1px -566px
}
::-webkit-scrollbar-button:disabled {
    background-color:#f9f9f9
}
::-webkit-scrollbar-button:horizontal:increment:disabled {
    background-position:0 -756px
}
::-webkit-scrollbar-button:horizontal:decrement:disabled {
    background-position:12px -737px
}
::-webkit-scrollbar-button:vertical:increment:disabled {
    background-position:-1px -703px
}
::-webkit-scrollbar-button:vertical:decrement:disabled {
    background-position:-1px -670px
}