`

css网页滚动条样式设置

    博客分类:
  • html
阅读更多
css样式详细介绍,网页滚动条样式设置
各条语句含义如下:
Crollbar-Face-color:滚动条页面颜色设定;
Scrollbar-Highlight-Color:滚动条斜面和左面颜色设定;
Scrollbar-Shadow-Color:滚动条下斜面和右面颜色设定;
Scrollbar-3Dlight-Color:滚动条上边和左边的边沿颜色设定;
Scrollbar-Arrow-Color:滚动条两端箭头颜色设定;
Scrollbar-Track-Color:滚动条底版颜色设定;
Scrollbar-Darkshadow-Color:滚动条下边和右边的边沿颜色设定。

举例说明:
------------------------------------------------
白背景,紫红色边框
------------------------------------------------
<STYLE type=text/css>
BODY {

scrollbar-face-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#800080;
scrollbar-darkshadow-color:#800080;
scrollbar-Shadow-color:#FFFFFF;
scrollbar-arrow-color:#800080;
scrollbar-track-color:#ffffff;}

</STYLE>


用CSS控制浏览器中滚动条样式2007-01-25 15:27
自从dhtml出现以来,微软对dhtml功能的加强就没有停止过,在微软最新的游览器internet explorer 5.5的的ie5.5增加
了许多新的样式表内容,对滚动条的样式进行修改也是其中之一,下面我们简单地介绍一下涉及浏览器滚动条的样式表内
容:
1.overflow内容溢出时的设置
overflow-x水平方向内容溢出时的设置
overflow-y垂直方向内容溢出时的设置
以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。
2.scrollbar-3d-light-color立体滚动条亮边的颜色
scrollbar-arrow-color上下按钮上三角箭头的颜色
scrollbar-base-color滚动条的基本颜色
scrollbar-dark-shadow-color立体滚动条强阴影的颜色
scrollbar-face-color立体滚动条凸出部分的颜色
scrollbar-highlight-color滚动条空白部分的颜色
scrollbar-shadow-color立体滚动条阴影的颜色
以上七个属性设置的值都是颜色值,可以使用样式表定义的各种表达方式。
使用以上的样式定义内容,我们可以指定浏览器窗口、多行文本框的滚动条的显示与否和颜色样式,第一组样式属性用于
设定被设定对象是否显示滚动条,第二组样式属性则用于设置滚动条的颜色,要注意的本文涉及的样式属性都是ie才能支
持的,第二组的样式属性只有ie5.5版本才能支持,所以请大家在调试的时候注意。
我们通过几个实例来讲解上述的样式属性:
1.让浏览器窗口永远都不出现滚动条
没有水平滚动条
<body style=\"overflow-x:hidden\">
没有垂直滚动条
<body style=\"overflow-y:hidden\">
没有滚动条
<body style=\"overflow-x:hidden;overflow-y:hidden\">或<body style=\"overflow:hidden\">
2.设定多行文本框的滚动条
没有水平滚动条
<textarea style=\"overflow-x:hidden\"></textarea>
没有垂直滚动条
<textarea style=\"overflow-y:hidden\"></textarea>
没有滚动条
<textarea style=\"overflow-x:hidden;overflow-y:hidden\"></textarea>
或<textarea style=\"overflow:hidden\"></textarea>
3.设定窗口滚动条的颜色
设置窗口滚动条的颜色为红色<body style=\"scrollbar-base-color:red\">
scrollbar-base-color设定的是基本色,一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。
加上一点特别的效果:
<body style=\"scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon\">
4.设定其他元素时,基本上一样,你最好是在样式表文件中定义好一个类,这样你就可以重复使用了。
.coolscrollbar
{
scrollbar-arrow-color:yellow;
scrollbar-base-color:lightsalmon;
}
将以上语句加入到样式表文件中或html头部的<style></style>当中,然后使用
<textarea class=\"coolscrollbar\"></textarea>
快快行动,让你的主页马上酷起来。


分享到:
评论

相关推荐

    css美化滚动条

    需要注意的是,这些CSS3的滚动条样式目前仅在Webkit内核的浏览器(如Chrome、Safari)中支持,对于Firefox、Edge等其他浏览器,需要使用它们特定的语法,或者借助JavaScript库实现跨浏览器的滚动条美化。 六、...

    四种漂亮的滚动条样式

    本文将探讨如何使用CSS来设置漂亮的滚动条样式。 首先,我们需要了解CSS中用于控制滚动条样式的属性。主要有以下几类: 1. `scrollbar-face-color`: 这个属性用来设置滚动条轨道上可见部分的颜色,即滚动条的主要...

    css中滚动条样式的设置.pdf

    CSS中的滚动条样式设置是一个重要的视觉优化技巧,用于改善网页用户体验。滚动条通常是浏览器默认样式,但通过CSS,我们可以自定义其外观,包括颜色、大小和形状,使其更符合网站设计的整体风格。以下是对滚动条样式...

    滚动条样式 html css

    一、CSS3 自定义滚动条样式 在 CSS3 中,可以使用伪元素 `::-webkit-scrollbar`、`::-webkit-scrollbar-thumb`、`::-webkit-scrollbar-track` 和 `::-webkit-scrollbar-corner` 来分别定义滚动条的宽度、滚动条滑块...

    IE滚动条 CSS样式

    在网页设计中,为了提升用户体验,设计师们常常会利用CSS(Cascading Style Sheets)来定制浏览器的滚动条样式。特别是在Internet Explorer(IE)浏览器中,由于其对滚动条样式的特殊处理,需要特别的技巧来进行...

    网页滚动条样式css智能配色器

    本文将深入探讨如何使用CSS来实现网页滚动条样式的自定义配色,以及智能配色器的应用。 首先,理解CSS中的滚动条伪元素是关键。`::-webkit-scrollbar` 是用来定义滚动条的整体样式,而 `::-webkit-scrollbar-thumb`...

    滚动条css精美样式

    然而,浏览器默认的滚动条样式往往显得单调,与许多现代网页设计的美观性不匹配。"滚动条css精美样式"的主题正是关注如何通过CSS来定制滚动条,使其与网页设计更加协调,提升用户体验。 CSS(Cascading Style ...

    好看的滚动条样式

    标题中的“好看的滚动条样式”指的是在网页设计中对浏览器默认滚动条进行美化和定制的一种技术。滚动条作为用户浏览长内容时不可或缺的交互元素,其样式和用户体验往往被开发者忽视,但通过自定义,可以提升网站的...

    易语言CSS样式滚动条

    CSS样式滚动条允许开发者自定义浏览器中滚动条的外观,使其与网页设计保持一致,提升用户体验。 首先,我们要理解CSS样式滚动条的基本概念。CSS(层叠样式表)是用于描述网页及应用程序用户界面外观和表现的样式...

    css中滚动条样式的设置.docx

    CSS中的滚动条样式设置是网页设计中一个细节但重要的部分,尤其在现代网页追求美观和用户体验的提升上。滚动条通常在内容超过容器大小时出现,帮助用户浏览页面的全部内容。通过CSS,我们可以定制滚动条的外观,使其...

    Qt悬浮滚动条-滚动条样式

    在“Qt悬浮滚动条-滚动条样式”这个主题中,我们主要探讨如何创建一个不占用控件实际宽高的滚动条,同时增强其视觉效果和交互体验。 首先,让我们了解滚动条的基本概念。Qt中的QScrollBar类提供了水平和垂直滚动条...

    HTML+CSS实现最简单的滚动条显示隐藏和更改滚动条样式

    本文将深入探讨如何使用HTML和CSS来实现滚动条的显示、隐藏以及自定义样式,使网页滚动条与整体设计更加协调一致。 首先,我们需要了解HTML5中引入的`overflow`属性,这是控制内容是否显示滚动条的关键。`overflow`...

    textArea滚动条样式

    首先,我们需要理解CSS3提供了对滚动条样式的一些控制,如`::-webkit-scrollbar`和`::-webkit-scrollbar-thumb`等伪元素,但这些样式只在Webkit内核的浏览器(如Chrome、Safari)中有效。对于Firefox、IE/Edge等非...

    网页滚动条样式生产工具

    网页滚动条样式生产工具,如IeCoolScrollBar,是一种专门用于定制和美化网页滚动条样式的软件。在传统的网页设计中,滚动条往往是系统默认样式,简洁但缺乏个性化。随着网页设计的不断发展,设计师们开始追求更加...

    Html+CSS实现滚动条不挤占内容区宽度.zip

    总的来说,通过理解和掌握这些 CSS3 的滚动条样式技巧,开发者能够实现滚动条不挤占内容区的布局,从而优化网页的用户体验。同时,结合提供的博客链接(https://blog.csdn.net/fukaiit/article/details/100069537)...

    CSS如何设置滚动条样式?.docx

    Webkit浏览器支持使用CSS伪元素和伪类来定制滚动条样式。以下是一些主要的CSS属性: 1. `::-webkit-scrollbar`:选择器用于设置整个滚动条的样式。 2. `::-webkit-scrollbar-thumb`:选择器用于设置滚动条滑块(即...

    一款好看的DIV+CSS滚动条

    在默认情况下,浏览器会提供标准的滚动条样式,但这些样式可能无法满足设计师对于界面美观和一致性的需求。因此,利用CSS,我们可以自定义滚动条的颜色、形状、宽度以及滑块等元素,使其与网页整体风格相协调。 这...

    div滚动条样式一览-div+css设计网

    在本文中,我们将深入探讨如何使用CSS来定制`div`元素的滚动条样式,以提升网页的视觉效果和用户体验。 一、滚动条的基本样式 在默认情况下,浏览器提供了一套统一的滚动条样式。然而,通过CSS3,我们可以自定义...

    jquery修改滚动条样式

    总之,通过`jQuery`和CSS,我们可以轻松地实现滚动条样式的个性化定制,增强网页的视觉效果和用户体验。需要注意的是,由于滚动条样式的跨浏览器兼容性问题,可能需要针对不同的浏览器进行适配,例如使用`-moz-`和`-...

    ASP 实例 CSS样式滚动条样式 文字特效 收藏本站 窗口控制 文字滚动显示 网页拾色器 安徽机电职业技术学院 陈伟

    1. **CSS样式滚动条样式**:CSS(Cascading Style Sheets)允许开发者自定义网页的视觉表现,包括滚动条的样式。通过使用CSS3的伪元素`::webkit-scrollbar`和`::webkit-scrollbar-part`,可以定制滚动条的颜色、宽度...

Global site tag (gtag.js) - Google Analytics