跳至主要內容
CSS - 自定义滚动条

网页自带的滚动条往往很难看,这时候就可以考虑用 css 自定义一个好看的滚动条了

警告

非标准: 该特性是非标准的,请尽量不要在生产环境中使用它
(但如果是Electron的话还是可以的哦)

伪类选择器

CSS 属性 描述
::-webkit-scrollbar 整个滚动条
::-webkit-scrollbar-thumb 滚动条滑块
::-webkit-scrollbar-track 滚动条轨道
::-webkit-scrollbar-button 滚动条按钮
::-webkit-scrollbar-track-piece 滚动条轨道的中间部分
::-webkit-scrollbar-corner 滚动条交汇处
::-webkit-resizer 滚动条交汇处的小方块

KamimikaCSSCSS滚动条笔记约 357 字...
SVG - CSS样式
属性名 描述
fill 填充颜色(none 表示不填充)
stroke 描边颜色(none 表示不描边)
stroke-width 描边宽度
stroke-dasharray 描边样式(实线与间隔长度)
stroke-linecap 线段端点样式:butt: 用直边结束线段; square: 用直边结束线段,但稍微超出实际路径的范围; round: 圆角结束线段
stroke-linejoin 线段连接样式:miter: 常规直连接; round: 圆角连接; bevel: 折角连接
opacity 不透明度

KamimikaSVGCSS笔记约 256 字...
CSS - 媒体查询

媒体查询通用语法:

@media mediatype and|not|only (media type) {
}

KamimikaCSSCSS媒体查询笔记约 465 字...
CSS - 引用

简单引用

<link rel="stylesheet" src="styles.css" />

KamimikaCSSCSS引用外部文件笔记约 190 字...