必威体育Betway必威体育官网
当前位置:首页 > IT技术

滚动条样式修改

时间:2019-09-30 04:43:17来源:IT技术作者:seo实验室小编阅读:65次「手机版」
 

滚动条样式


::-webkit-scrollbar{
  width: 12px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
//滚动条整体部分,其中的属性有width,height,background,border(就和一个块级元素一样)等。
::-webkit-scrollbar-button{

}
//滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  //border-radius: 10px;
  background: rgba(13, 89, 179, 0.4) !important;
}
// 外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track-piece{

}
//内层轨道,滚动条中间部分(除去)。
::-webkit-scrollbar-thumb{
  border-radius: 5px;
  background: rgba(13, 89, 179, 1);
 
}
//滚动条里面可以拖动的那部分
::-webkit-scrollbar-corner{

}
//边角(两个滚动条夹角)
::-webkit-resizer{

}

参考 https://blog.csdn.net/qiphon3650/article/details/81036444

参考https://webkit.org/blog/363/styling-scrollbars/

相关阅读

UI框架---BUTTONS(按钮样式)

最近发现了一个有意思的CSS样式库,和Bootstrap相似,但是它是专门的一个高度可定制的,免费的并且开源的按钮CSS样式库,这里附上它的网

如何修改鼠标指针的样式

如何修改鼠标指针的样式 概要 不知道经常使用电脑的你有没有遇到过这样的问题,使用电脑的时候经常找不到自己的”鼠标指针”(就是

改变滚动条的颜色

<!DOCTYPE HTML> <html> <head> <title>改变滚动条的颜色</title> <style> .inner{ width: 265px; height: 400px; po

Axure 8.0 RP:制作一个“美美哒”的滚动条

在实际生产过程中我们发现Axure的动态面板原件可以提供强大的功能,比如滚动条,但是滚动条只能以原生效果展示,无法对其展示样式进行

最好的文本框样式 最漂亮的文本框样式 textbox css样

https://www.cnblogs.com/coolsundy/p/4229439.html

分享到:

栏目导航

推荐阅读

热门阅读