[前端] chrome浏览器定义滚动条样式及字体中英对照

一、定义chrome浏览器滚动条样式

 

<style>
    .box::-webkit-scrollbar{  box-shadow:inset 0 0 .3em rgba(0,0,0,.4); background:-webkit-linear-gradient(left, transparent 0%, #dce2f3 50%, transparent 100%); border-radius:2em; margin:0 1em; height:1em; }
    .box::-webkit-scrollbar:hover{ box-shadow:inset 0 0 .6em rgba(0,0,0,.5); }
    .box::-webkit-scrollbar-thumb{ height:50%; border-radius:2em; cursor:pointer; background:-webkit-linear-gradient(top, #9ac4f8 0%, #5ca3fa 50%, #9ac4f8 100%);}
    .box::-webkit-scrollbar-button{ /*width:100%; height:8px; border:solid 1px red;*/} /* Custom button */

    .box::-webkit-scrollbar-button:start:decrement{} /* Custom start button */
    .box::-webkit-scrollbar-button:end:increment{} /* Custom end button */

    .box::-webkit-scrollbar-thumb:hover{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background:-webkit-linear-gradient(top, #9ac4f8 0%, #5ca3fa 50%, #9ac4f8 100%); }
</style>

 

 

 

二、字体中英对照

 

字体名称	英文名称	Unicode 编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

 

 

 

These are the pseudo class selectors. They allow for more specific selection of the parts, like when the scrollbar is in different states.

:horizontal
:vertical
:decrement
:increment
:start
:end 
:double-button
:single-button
:no-button
:corner-present
:window-inactive

参考链接：https://css-tricks.com/custom-scrollbars-in-webkit/

他人博客：http://www.lyblog.net/detail/314.html

 

欢迎关注分享录：http://fenxianglu.cn/