WordPress子比主题侧边滚动条样式美化

综合评论9,910,111字数 190阅读0分38秒

使用方法

只需在主题设置自定义CSS代码里面添加美化的css代码即可! 如果主题没有 自定义代码 那么在WordPress主题目录文件里找style.css文件或者在WordPress后台里找“外观—>自定义—>额外CSS”里面美化的css代码即可!

单色滚动条样式

复制代码
  1. /*滚动条显示样式*/
  2. ::-webkit-scrollbar-thumb{
  3. background-color:#FF6666; /*更改喜欢的十六进制颜色*/
  4. height:50px;
  5. outline-offset:-2px;
  6. outline:2px solid #fff;
  7. -webkit-border-radius:4px;
  8. border: 2px solid #fff;
  9. }
  10. /*滚动条大小*/
  11. ::-webkit-scrollbar{
  12. width:8px;
  13. height:8px;
  14. }
  15. /*滚动框背景样式*/
  16. ::-webkit-scrollbar-track-piece{
  17. background-color:#fff;
  18. -webkit-border-radius:0;
  19. }

彩色滚动条样式

复制代码
  1. /**彩色滚动条样式*/
  2. ::-webkit-scrollbar {
  3. width: 10px;
  4. height: 1px;
  5. }
  6. ::-webkit-scrollbar-thumb {
  7. background-color: #12b7f5;
  8. background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
  9. }
  10. ::-webkit-scrollbar-track {
  11. -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  12. background: #f6f6f6;
  13. }

 文章源自小武站https://1z345.cn/小武站-https://bbs.50-0.cn/561.html 文章源自小武站https://1z345.cn/小武站-https://bbs.50-0.cn/561.html

继续阅读
分页按钮美化
分页按钮美化 综合

分页按钮美化

/*页码样式微调*/ .pagenav .current, .pagenav .page-numbers, .pagenav a { border: 0; padding: 8px 14px; bac...
添加微语页面
添加微语页面 综合

添加微语页面

美化教程1、首先在子比主题目录的functions.php里面加入以下代码://微语 add_action('init', 'my_custom_init'); function my_custom_...
  • 本文由 admin 发表于2024年8月10日 10:39:17
  • 转载请务必保留本文链接:https://bbs.50-0.cn/561.html
匿名

发表评论

匿名网友
确定