首页 > 其他分享 >分享一个自定义颜色的侧边栏CSS

分享一个自定义颜色的侧边栏CSS

时间:2023-09-14 21:57:25浏览次数:38  
标签:background 自定义 侧边 162 rgba webkit transparent CSS

很简单!

将以下代码放入站点的 css 即可生效,css 中的颜色可自定义修改 RGB/HEX 的颜色值~

/** 彩色滚动条样式开始 */
::-webkit-scrollbar {
width: 10px;
height: 1px;
}
::-webkit-scrollbar-thumb {
background-color: #a0c595;
background-image: -webkit-linear-gradient(45deg, rgba(55, 162, 0, 1) 25%, transparent 25%, transparent 50%, rgba(55, 162, 0, 1) 50%, rgba(55, 162, 0, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #f6f6f6;
}
/** 彩色滚动条样式结束 */

标签:background,自定义,侧边,162,rgba,webkit,transparent,CSS
From: https://www.cnblogs.com/HOMIEBlog/p/17703577.html

相关文章

  • 40 个超有意思的 CSS 网站
    ......
  • html css dotted border 边框虚线太密
    三角形/**正三角*/.triangle{width:0;height:0;border-style:solid;border-width:025px40px25px;border-color:transparenttransparentrgb(245,129,127)transparent;}/**倒三角*/.triangle{width:0;height:0;border-style:solid;bor......
  • 熟练掌握并充分利用CSS3的新特性,持续更新中。。。
    1.1  尝试新颖的CSS3特性首先,我们来看一个具体的案例。  https://code.juejin.cn/pen/7277536985772720139 1.2  CSS3新特性简介和浏览器支持情况新特性简介:1)强大的CSS3选择器2)抛弃图片的视觉效果3)盒模型变化(多列布局和弹性盒模型)4)阴影效果5)Web字体和webFo......
  • 更改Eclipse下Tomcat的部署目录和自定义user library
     更改Eclipse下Tomcat的部署目录http://kingxss.iteye.com/blog/1741438自定义userlibrary......
  • CSS gradient渐变之webkit核心浏览器下的使用
    [color=red][b]一、关于渐变[/b][/color]渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方。例如,您可以指定一个这么一个渐变:顶部的颜色是红色,中间的是蓝色,底部为黄色来作为div的背景色。渐......
  • 现代 CSS 解决方案:CSS 原生支持的三角函数
    在CSS中,存在许多数学函数,这些函数能够通过简单的计算操作来生成某些属性值,例如:calc():用于计算任意长度、百分比或数值型数据,并将其作为CSS属性值。min()和max():用于比较一组数值中的最大值或最小值,也可以与任意长度、百分比或数值型数据一同使用。clamp():用于将属性值限制在......
  • 直播app开发,CSS3动画实现左右无缝滚动图
    直播app开发,CSS3动画实现左右无缝滚动图<viewclass="shortList_con"><viewclass="scrollCon":style="'width:'+(shortRouteList.length)*210+'rpx'"><viewclass="shortItem"v-for="(item,index......
  • 纯css实现边框环绕的效果
    最近做项目遇到一个需求,需要给卡片添加一个边框环绕的效果,当鼠标移入卡片时,出现边框。这里我主要是使用:before和:after来辅助实现这个功能。在很多时候,我们可以巧用:before或者:after来实现一些看起来较为复杂的效果。我们先看看效果:代码如下,希望大家能受到些许的启发,......
  • How to fix Tailwind CSS colors not work in Next.js All In One
    HowtofixTailwindCSScolorsnotworkinNext.jsAllInOneTailwindCSS&Next.js13errorimporttype{Config}from'tailwindcss'constconfig:Config={content:['./src/pages/**/*.{js,ts,jsx,tsx,mdx}','......
  • 自定义内存分配在 uC/OS-II 中的应用
    uC/OS-II是一个广泛用于嵌入式系统的实时操作系统内核,它提供了强大的多任务管理和调度功能。在嵌入式应用中,内存管理是一个至关重要的问题,而uC/OS-II允许开发人员自定义内存分配策略,以满足不同应用的需求。本文将讨论在uC/OS-II中如何进行自定义内存分配,并提供相关的代码演示......