CSS设置滚动条样式

最新推荐文章于 2024-05-28 19:06:27 发布
最新推荐文章于 2024-05-28 19:06:27 发布
阅读量299 收藏
点赞数
文章标签： css c

CSS设置滚动条样式

选取了部分样式的代码：当然，里面的具体颜色可以调整，只能写在页面哦。好像写外部样式出不了效果。


<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #9EBFE8; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #9EBFE8; scrollbar-darkshadow-color: #9EBFE8; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF">
这个是蓝色
</div>

<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; scrollbar-face-color: #59ADBB; scrollbar-track-color: #FFFFFF; scrollbar-3dlight-color: #59ADBB; scrollbar-darkshadow-color: #59ADBB">
这个是绿色</div>

<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #FDDEE8; scrollbar-shadow-color: #FDDEE8; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #FDCFDD; scrollbar-darkshadow-color: #FDCFDD; scrollbar-track-color: FFF6F9; scrollbar-arrow-color: #FEA6C0">
浅粉红
</div>

<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #333333; scrollbar-shadow-color: #808080; scrollbar-highlight-color: #333333; scrollbar-3dlight-color: #808080; scrollbar-darkshadow-color: #333333; scrollbar-track-color: #191919; scrollbar-arrow-color: #CCCCCC">
黑色
</div>

<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-face-color: #d9d9d9; scrollbar-3dlight-color: #d9d9d9; scrollbar-darkshadow-color: #d9d9d9; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #ffffff">
灰色</div>

<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #FFC300; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #FFC300; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFC300">
金黄色
</div>

hahahaha7551
关注
如何将横向滚动条加粗css,css实现横向滚动条的两种方式（代码实例）
weixin_32523999的博客
08-04 1204
本章给大家介绍用css实现横向滚动条的两种方式。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。html代码：全部Adobe微软会计绘画Adobe微软会计绘画一、 原始css + jquery 实现横向滚动条(原生js可以实现，为了方便才用的jQuery)css代码：* {box-sizing: border-box;margin: 0;padding: 0}.nav_wrap{ov...
CSS2 样式表(属性·滚动条)
做最好的自己
10-30 1885
1、scrollbar-3dlight-color   语法：scrollbar-3dlight-color : color 取值：color : 指定颜色。 说明：设置或检索滚动条亮边框颜色
css鼠标移至滚动条变粗
bigsmart12的博客
08-11 2494
需求为：默认情况滚动条浅色且较细，用户将鼠标移至滚动条上则变成深色且加粗。
CSS之设置滚动条样式
weixin_30625691的博客
09-05 75
因为在现在的大部分项目中很多都用到了滚动条，有时候用到模拟的滚动条，现在说下滚动条的CSS也能解决。 比如网易邮箱的滚动条样子很好看，就是利用的CSS来设置的，而且是webkit浏览器的。如图所示： 下面就讲解这几个属性怎么使用，代表什么意思。 一：webkit下面的CSS设置滚动条 主要有下面7个属性 ::-webkit-scrollbar滚动条整体部分，可以设置宽度啥...
【css设置滚动条粗细】
朽木自雕的博客
05-17 3821
List item css设置滚动条粗细 *::-webkit-scrollbar { width: 12px; height: 12px; } *::-webkit-scrollbar-button { width: 0px; height: 0px; display: none; } *::-webkit-scrollbar-corner { background-color: transparent; } *::-webkit-scrollbar-thumb { b..
CSS 设置滚动条样式的实例代码
09-24
以下是一个简单的滚动条样式设置的例子： ```css ::-webkit-scrollbar { width: 16px; height: 16px; background-color: #F5F5F5; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0...
CSS 设置滚动条样式的实现
11-21
以下将详细讲解如何通过CSS设置滚动条样式，并提供一些关键知识点。 首先，滚动条主要由以下几个部分构成： 1. **scrollbar**: 整个滚动条，包括按钮和轨道。 2. **scrollbar-button**: 滚动条轨道的两端按钮，...
div css 滚动条样式 DIV滚动条属性及样式设置方式
12-13
总的来说，通过CSS，我们可以实现自定义的`div`滚动条样式，不仅限于颜色，还可以调整大小、形状以及过渡效果，从而提升网页的用户体验和视觉效果。但为了保证兼容性，开发者应当同时使用旧的样式属性和新的伪元素...
css修改滚动条样式
fanyanjiang的博客
04-10 248
//滚动条 ::-webkit-scrollbar-track-piece { background-color: #fff; } ::-webkit-scrollbar { width: 0px; //隐藏 }
css修改自带滚动条样式
Jerry的博客
05-30 631
写在前面 浏览器自带的滚动条不太好看，短粗短粗的，我们可以通过css来更改它的样式 显示效果 代码实现 ::-webkit-scrollbar{ width: 4px; height: 10px; } ::-webkit-scrollbar-button{ width: 0; height: 0; } ::-webkit-scrollbar-track{ } ::-webkit-scro...
鼠标移入滚动条加粗
最新发布
qq_33548028的博客
05-28 282
【代码】鼠标移入滚动条加粗。
css修改滚动条的样式
qq_45067263的博客
05-27 125
::-webkit-scrollbar { /滚动条整体样式/ width: 4px; /高宽分别对应横竖滚动条的尺寸/ height: 1px; } ::-webkit-scrollbar-thumb { /滚动条里面滚动块/ border-radius: 10px; box-shadow: inset005pxrgba(97, 184, 179, 0.1); background: rgba(0, 0, 0, 0.2); } ::-webkit-scrollbar-track { /滚动条里面背景滑块/
9.16星期五滚动条加粗
m0_53831834的博客
09-19 990
vue滚动条
css设置div滚动条的样式，可改变大小
xm的博客
09-14 1万+
::-webkit-scrollbar{width:14px;} ::-webkit-scrollbar-track{background-color:#bee1eb;} ::-webkit-scrollbar-thumb{background-color:#00aff0;} ::-webkit-scrollbar-thumb:hover {background-color:#9c3} ::-we...
css设置滚动条样式
wwf1225的博客
12-15 3567
css设置滚动条样式 先看效果图 附上效果图代码： 1.style部分 <style> /*定义滚动条样式（高宽及背景）*/ ::-webkit-scrollbar { width: 6px; /* 滚动条宽度， width：对应竖滚动条的宽度 height：对应横滚动条的高度*/ background: #007acc; } /*定义滚动条轨道（凹槽）样式*/ ::-webki..
css如何修改滚动条样式
热门推荐
qq_36926807的博客
07-05 10万+
默认滚动条样式如下：那如何修改呢？如下代码：&lt;div class="inner"&gt;         &lt;div class="innerbox"&gt;         &lt;p style="height:200px;"&gt;这是内容111&lt;/p&gt;         &lt;p style="height:400px;"&am
css设置滚动条，以及修改滚动条样式
第⑦个前端
10-20 4136
在对应的div中设置宽高，css中设置滚动条 overflow-y: scroll; white-space: nowrap; 2 设置滚动条样式 /* 定义滚动条样式 */ ::-webkit-scrollbar { width: 6px; height: 6px; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5); b
css 设置滚动条样式
10-16
可以使用 CSS 的 ::-webkit-scrollbar 伪元素来设置滚动条的样式，具体代码如下： ``` /* 设置滚动条整体样式 */ ::-webkit-scrollbar { width: 10px; /* 滚动条宽度 */ } /* 设置滚动条轨道样式 */ ::-webkit-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值