div滚动条样式一览

最新推荐文章于 2023-12-04 15:45:53 发布
最新推荐文章于 2023-12-04 15:45:53 发布
阅读量127 收藏 1
点赞数
分类专栏： 其他程序 文章标签： CSS ASP.net ASP .net Java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_19217/article/details/81821665
版权 
<div style="WIDTH: 120; HEIGHT: 140; BACKGROUND-COLOR: #0000C6; OVERFLOW: scroll; scrollbar-face-color:#70807d; scrollbar-arrow-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-3dlight-color:#70807d; scrollbar-shadow-color:#ffffff; scrollbar-darkshadow-color:#70807d; scrollbar-track-color:#ffffff">
文字内容
</div> <div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-3dlight-color:#FF0033; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFF33; scrollbar-darkshadow-color:#FFFF33; scrollbar-face-color:#FF0033; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FF0033">
文字内容
</div> <div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-3dlight-color:#FF0033; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFF33; scrollbar-darkshadow-color:#FFFF33; scrollbar-face-color:#FF0033; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FF0033">
文字内容
</div> <div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; SCROLLBAR-FACE-COLOR: EAECEC; SCROLLBAR-HIGHLIGHT-COLOR: EAECEC; SCROLLBAR-SHADOW-COLOR: BLACK; SCROLLBAR-3DLIGHT-COLOR: EAECEC; SCROLLBAR-ARROW-COLOR: EAECEC; SCROLLBAR-TRACK-COLOR: FFFFFF; SCROLLBAR-DARKSHADOW-COLOR: EAECEC">
文字内容
</div> 
<div style="WIDTH: 120; HEIGHT: 140;OVERFLOW: scroll; scrollbar-3dlight-color:#595959; scrollbar-arrow-color:#FFFFFF; scrollbar-base-color:#CFCFCF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-face-color:#CFCFCF; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#595959">
文字内容
</div>
 <div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #D2E5F4; scrollbar-highlight-color: #D2E5F4; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #D2E5F4">
文字内容
</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-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: #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> <div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-3dlight-color:5A5227; scrollbar-arrow-color:FFF8C5; scrollbar-base-color:DDD38D; scrollbar-darkshadow-color:FFF8C5; scrollbar-face-color:DDD38D; scrollbar-highlight-color:FFF8C5; scrollbar-shadow-color:5A5227">
文字内容
</div> <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-face-color: #DB52BC; scrollbar-shadow-color: #E994D6; scrollbar-highlight-color: #E994D6; scrollbar-3dlight-color: #DB52BC; scrollbar-darkshadow-color: #DB52BC; scrollbar-track-color: #E994D6; scrollbar-arrow-color: #FFFFFF">
文字内容
</div> 
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #333333; scrollbar-shadow-color: #333333; scrollbar-highlight-color: #666666; scrollbar-3dlight-color: #101010; scrollbar-darkshadow-color: #070707; scrollbar-track-color: #101010; scrollbar-arrow-color: #000000">
文字内容
</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-face-color:#FFC4E1; scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#FF95CA; scrollbar-darkshadow-color:#FFB5DA; scrollbar-shadow-color:#FF6AB5; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFDDEE">
文字内容
</div> <div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #DBEBFE; scrollbar-shadow-color: #B8D6FA; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #DBEBFE; scrollbar-darkshadow-color:#458CE4; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #458CE4">
文字内容
</div> 
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #885C10; scrollbar-highlight-color: #F8ECD8; scrollbar-3dlight-color: #885C10; scrollbar-darkshadow-color: #F8ECD8; scrollbar-track-color: #F8ECD8; scrollbar-arrow-color: #885C10">
文字内容
</div> <div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #222222; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #222222; scrollbar-shadow-color: #FFFFFF; scrollbar-darkshadow-color: #222222; scrollbar-track-color: #222222; scrollbar-arrow-color: #222222">
文字内容
</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-Css.net设计网 参考:http://www.div-css.net/div_css/topic/index.asp?id=7403
iteye_19217
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML常用标签及CSS常用样式
wjjwww11的博客
06-13 261
...标题标签，其中n为1–6的值。 ...斜体 ... 强调斜体 ... 加粗 ... 强调加粗 作品的标题（引⽤用） ... 下标 ... 上标 ... 删除线 换⾏行行 ... 换段 ⽔水平分割线 ... ⽆无序列表 ... 有序列表 其中
div滚动条样式一览-div+css设计网
07-26
div滚动条样式一览-div+css设计网，div滚动条，多个div滚动条样式
DIV滚动条样式大全
fyqcdbdx的专栏
11-22 1379
<div style="WIDTH: 120; HEIGHT: 140; BACKGROUND-COLOR: #0000C6; OVERFLOW: scroll; scrollbar-face-color:#70807d; scrollbar-arrow-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-3dlight-colo
CSS重置浏览器所有默认的样式
weixin_30564785的博客
08-31 563
::-webkit-scrollbar-track-piece { width: 8px; height:8px; background-color: #f0f0f0; /* 背景色 */ } ::-webkit-scrollbar { width: 8px; height:8px; background-color: #00C0FF } ...
div 滚动条样式
小武的博客
05-24 865
1. 效果如图所示： 2. html示例代码： <div class="con"> <p>ssss</p> <p>ssss</p> <p>ssss</p> <p>ssss</p> </div&gt...
div样式
rewoshengqi的专栏
07-02 437
div（1） 文字内容
HTML标记一览表及用法说明
09-28
- `<DIV>`：用于布局，可组合其他元素并进行定位。 - `<NOBR>`：阻止文本自动换行。 - `<WBR>`：建议的换行点，允许浏览器在需要时进行换行。 3. **字体标记**： - `<STRONG>` 和 `<B>`：用于加粗文本，`...
html标记一览表
07-10
- `<DIV>`：定义了一个文档分区，可以用来布局和定位内容。 - `<NOBR>`：阻止文本自动换行，但现代浏览器已不推荐使用。 - `<WBR>`：提供一个建议的换行点，但不强制换行。 3. **字体标记**： - `<STRONG>` 和 ...
HTML语言剖析之HTML标记一览
09-01
- `<DIV>`：区隔标记，用于分组HTML元素并进行样式控制。 - `<NOBR>`：不折行，阻止文本在一行内换行。 - `<WBR>`：建议折行，允许在单词内部添加可能的断行点。 3. **字体标记**： - `<STRONG>` 和 `<B>`：使...
HTML div 滚动条样式设计
weixin_30312659的博客
07-20 941
::-webkit-scrollbar-track-piece{ background-color:#fff;/*滚动条的背景颜色*/ -webkit-border-radius:0;/*滚动条的圆角宽度*/ } ::-webkit-scrollbar{ width:8px;/*滚动条的宽度*/ height:8px;/*滚动条的高度*/ } ::-webkit-scrollb...
div css 滚动条样式 DIV滚动条属性及样式设置方式
12-13
DIV滚动条就是利用DIV标签，在里面嵌入CSS样式表，当div所定义的区域的内容达到一定程度时，在div标签里面嵌入CSS样式表，定义overflow的属性值，设置DIV滚动条相关的属性。 这里向大家描述一下DIV滚动条属性及样式设置，所谓DIV滚动条，就是利用DIV标签，在里面嵌入CSS样式表，加入overflow的属性值，这样，当div所规范的区域内的内容达到一定程序时，滚动条就派上用场。 DIV滚动条属性及样式设置 所谓DIV滚动条，就是利用DIV标签，在里面嵌入CSS样式表，加入overflow的属性值，这样，当div所规范的区域内的内容达到一定程序时，滚动条就派上用场。其功能大约
div滚动条
weixin_45010894的博客
06-02 931
禁用滚动条，隐藏滚动条
div自定义滚动条样式
哦呐嘿
06-05 375
原生滚动条样式如下 那么如何改变原生div的滚动条样式呢 代码如下： 拿到父类的div后 .visit-r::-webkit-scrollbar-track{ background: #fff; border-radius:2px; /* 滚动条背景样式 可能不理解 但你可以试试调试一下呀 */ } .visit-r::-webkit-scrollbar-thumb{ background: #aaa;
滚动条样式
2301_76315784的博客
12-04 584
二、在Ant表格中的滚动条。
css3自定义滚动条样式
weixin_34128501的博客
04-06 294
滚动条的组成： ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条） ::-webkit-scrollbar-track滚动条的轨道（里面装有Thumb） ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通...
html div 隐藏滚动条样式,div滚动条样式隐藏与显示
weixin_36386044的博客
06-07 2370
DIV滚动条样式是可以设置的，CSS滚动条同样也可以显示与隐藏，对div设置滚动条，设置其横向滚动条和纵向滚动条样式应该怎么做呢？要设置CSS滚动条样式，需要用到overflow-y和overflow-x来设置div盒子对象右侧和底部滚动条效果。同时也可以使用CSS样式设置html框架iframe的滚动条隐藏，接下来为大家介绍。常规overflow怎么设置overflow-y:scroll 总是显...
DIV怎么自动添加滚动条？并给滚动条添加样式
热门推荐
m0_46652188的博客
07-14 1万+
如何实现当DIV里的内容超过DIV的高度，DIV会自动添加滚动条 1.　div的style设置了overflow:auto后，当DIV里的内容超过DIV的高度，DIV会自动添加滚动条，拉动滚动条才能看到底.
html中div滚动条设置,DIV滚动条属性及样式设置方式
weixin_39770165的博客
06-07 3053
这里向大家描述一下DIV滚动条属性及样式设置，所谓DIV滚动条，就是利用DIV标签，在里面嵌入CSS样式表，加入overflow的属性值，这样，当div所规范的区域内的内容达到一定程序时，滚动条就派上用场。DIV滚动条属性及样式设置所谓DIV滚动条，就是利用DIV标签，在里面嵌入CSS样式表，加入overflow的属性值，这样，当div所规范的区域内的内容达到一定程序时，滚动条就派上用场。其功能大...
htmldiv滚动条样式
最新发布
07-26
HTML `<div>` 元素默认情况下并不会显示滚动条，而是会自动适应内容大小。然而，在某些情况例如元素内部包含大量内容、超过元素自身的高度时，可能会导致内容溢出，这时通常需要手动添加滚动条以便用户可以浏览全部内容。 在 CSS 中，我们可以控制 `<div>` 的滚动条样式以及其是否可见。以下是一些基本方法： ### 控制滚动条可见性 首先，可以通过 `overflow` 属性来控制内容是否溢出。设置为 `auto` 或者 `scroll` 可以让元素显示滚动条： ```css <div style="overflow: auto;">内容</div> ``` 当设置为 `auto` 时，只会在内容溢出时才显示滚动条；而设置为 `scroll` 总是显示滚动条。 ### 自定义滚动条样式 除了控制滚动条的可见性，我们还可以自定义滚动条的样式。这通常是通过修改 `::-webkit-scrollbar`, `::-moz-scrollbar`, 和 `::scrollbar` 等伪元素来进行的。下面是一个简单的例子展示如何改变滚动条的颜色和宽度： ```css /* 设置滚动条颜色 */ body { scrollbar-color: #4A90E2 transparent; } /* 定义滚动条的主轨颜色（滑动部分） */ ::-webkit-scrollbar-track, ::-moz-scrollbar-track, -ms-scrollbar-track { background: transparent; /* 背景色透明 */ } /* 定义滚动条的手柄颜色 */ ::-webkit-scrollbar-thumb, ::-moz-scrollbar-thumb, -ms-scrollbar-thumb { border-radius: 5px; box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); background: #4A90E2; /* 滑动手柄颜色 */ } ``` 请注意，上述CSS代码仅针对Webkit浏览器（如Chrome和Safari），对于Firefox和其他非Webkit浏览器，你需要使用 `-moz-` 前缀替换 `-webkit-`。 ### 实现全屏滚动 如果希望在一个元素内实现类似全屏滚动的效果，可以考虑将 `position` 属性设置为 `fixed` 并结合 `transform` 进行调整： ```css .container { position: relative; height: 100vh; /* 设定容器的高度为视口高度 */ overflow-y: scroll; /* 添加垂直滚动条 */ } .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding-top: 4rem; /* 给内容区域加上顶部填充，模拟顶部空间 */ transform: translateY(-4rem); /* 将内容向上移动 */ } ``` 以上就是关于 `<div>` 滚动条样式的介绍及实现方式。通过适当的CSS设置，你可以轻松地定制滚动条的外观，并使其满足各种布局需求。如果你有特定的问题或需要更多详细的示例，请随时提问！---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值