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

来源：互联网发布：windows redstone 2 编辑：程序博客网时间：2024/05/16 07:08

一、定义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楷体_GB2312KaiTi_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

谢谢关注~

1 0