[前端] chrome浏览器定义滚动条样式及字体中英对照
2015-11-05 16:34
597 查看
一、定义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 |
: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
谢谢关注~
相关文章推荐
- HTML与CSS零碎知识点归纳
- js原生设计模式——8单例模式之简约版属性样式方法库
- css画正三角形
- 【03】emmet系列之CSS语法
- html、css心得
- css将文字和图片水平垂直居中
- css3背景渐变颜色linear-gradient(IE兼容)
- js返回最终样式函数,兼容IE和DOM,设置参数:元素对象、样式特性
- 如何控制iOS的导航栏和状态栏的样式
- "贪吃蛇"-css3效果
- CSS float 属性 设置布局
- css文档超出部分隐藏并显示省略号
- css Absolute绝对定位居中和div沉底
- css hack
- html引用外部css文件
- 自定义Chechbox样式
- css media
- 几款好看的HTML按钮样式
- touch2.4.1(cmd6.1.7601) 修改theme-修改官方样式(上)
- CSS 类名的单词连字符:下划线还是连接符?