CSS实例教程:scrollbar的特性专业知识及款式归类

日期:2021-03-12 类型:科技新闻 

关键词:小程序如何制作,预约小程序,微信小程序怎么做,微信抽奖小程序,小程序外包

1.overflow內容外溢时的设定(设置被设置目标是不是显示信息翻转条)
overflow-x水平方位內容外溢时的设定
overflow-y竖直方位內容外溢时的设定
以上3个特性设定的值为visible(默认设置值)、scroll、hidden、auto。
2.scrollbar⑶d-light-color立体式翻转条亮边的色调(设定翻转条的色调)
scrollbar-arrow-color左右按钮上3角箭头的色调
scrollbar-base-color翻转条的基础色调
scrollbar-dark-shadow-color立体式翻转条强黑影的色调
scrollbar-face-color立体式翻转条凸出一部分的色调
scrollbar-highlight-color翻转条空白一部分的色调
scrollbar-shadow-color立体式翻转条黑影的色调 86oo精彩实例教程
大家根据几个案例来说解上述的款式特性:
1.让访问器对话框始终都不出現翻转条
沒有水平翻转条
<body style="overflow-x:hidden">
沒有竖直翻转条
<body style="overflow-y:hidden">
沒有翻转条
<body style="overflow-x:hidden;overflow-y:hidden">或<body
style="overflow:hidden"> http://www.o.com
2.设置多写作本框的翻转条
沒有水平翻转条
<textarea style="overflow-x:hidden"></textarea> 86oo精彩实例教程
沒有竖直翻转条
<textarea style="overflow-y:hidden"></textarea> 欢迎各位浏览86oo.com
沒有翻转条
<textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>
或<textarea style="overflow:hidden"></textarea>
3.设置对话框翻转条的色调
设定对话框翻转条的色调为鲜红色<body style="scrollbar-base-color:red">
scrollbar-base-color设置的是基础色,1般状况下只必须设定这1个特性便可以做到更改翻转条色调的目地。
再加1点非常的实际效果:
<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">
4.在款式表文档中界定好1个类,启用款式表。
<style>
.coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}
</style>
这样启用:
<textarea class="coolscrollbar"></textarea>
Scrollbar-Face-Color为翻转条表层色调设置;
Scrollbar-Highlight-Color为翻转条上斜坡和左斜坡色调设置;
Scrollbar-Shadow-Color为翻转条下斜坡和右斜坡色调设置;
Scrollbar⑶Dlight-Color为翻转条上边和左侧的边缘色调设置;
Scrollbar-Arrow-Color为翻转条两边箭头色调设置。
Scrollbar-Track-Color为翻转条底板色调设置;
Scrollbar-Darkshadow为翻转条下边和右侧边缘色调设置。
举例:

拷贝编码
编码以下:

body {
background-color: #ffffff;
color: #336699;
SCROLLBAR-FACE-COLOR: #BED8EB;
SCROLLBAR-SHADOW-COLOR: #DDF8FF;
SCROLLBAR-HIGHLIGHT-COLOR: #92C0D1;
SCROLLBAR⑶DLIGHT-COLOR: #DDF8FF;
SCROLLBAR-DARKSHADOW-COLOR: #92C0D1;
SCROLLBAR-TRACK-COLOR:#BED8EB;
SCROLLBAR-ARROW-COLOR: #92C0D1
}