Home > Article > Web Front-end > Example case sharing of CSS custom scroll bar scrollbar-face-color
Example case sharing of CSS custom scroll bar scrollbar-face-color
- 黄舟Original
- 2017-07-03 10:59:381488browse
CSS-scrollbar-face-colorCustom scroll bar
Due to website requirements or specific needs such as page beauty, you can use a custom scroll bar to set it. The picture below is the current source code rendering. Effect. 
Source code effect:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>scrollbar-face-color_CSS----hongyy</title>
<style>
p{
overflow:scroll;
width:500px;
height:200px;
margin-top:20px;
}
/*// 一、必须增加，设置滚动条样式*/
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/*// 二、置底的滑动槽，可以选择不写，默认*/
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ccc;
}
/*//三、滚动条滑块和第一条必须书写，不写的话，无法实现*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: pink;
}
</style>
</head>
<body>
<p class="test">自定义滚动条3D表面的(threedface)的外观颜色。
你将在IE浏览器下看到滚动条的3D表面的(threedface)自定义滚动条3D表面的(threedface)的外观颜色。
你将在IE浏览器下看到滚动条的3D表面的(threedface)自定义滚动条3D表面的(threedface)的外观颜色。
你将在IE浏览器下看到滚动条的3D表面的(threedface)自定义滚动条3D表面的(threedface)的外观颜色。
你将在IE浏览器下看到滚动条的3D表面的(threedface)自定义滚动条3D表面的(threedface)的外观颜色。
你将在IE浏览器下看到滚动条的3D表面的(threedface)自定义滚动条3D表面的(threedface)的外观颜色。
你将在IE浏览器下看到滚动条的3D表面的(threedface)自定义滚动条3D表面的(threedface)的外观颜色。
你将在IE浏览器下看到滚动条的3D表面的(threedface)自定义滚动条3D表面的(threedface)的外观颜色。
你将在IE浏览器下看到滚动条的3D表面的(threedface)自定义滚动条3D表面的(threedface)的外观颜色。
你将在IE浏览器下看到滚动条的3D表面的(threedface)自定义滚动条3D表面的(threedface)的外观颜色。
你将在IE浏览器下看到滚动条的3D表面的(threedface)自定义滚动条3D表面的(threedface)的外观颜色。
你将在IE浏览器下看到滚动条的3D表面的(threedface)自定义滚动条3D表面的(threedface)的外观颜色。
你将在IE浏览器下看到滚动条的3D表面的(threedface)自定义滚动条3D表面的(threedface)的外观颜色。
你将在IE浏览器下看到滚动条的3D表面的(threedface)</p>
</body>
</html> ps: You can copy it directly ^_^
Attached is the scroll bar style under IE:
IE:
scrollbar-arrow-color: rgba(0,0,0,0.3); /*The color of the triangular arrow*/
scrollbar-face-color: rgba(0,0 ,0,0.5); /*The color of the three-dimensional scroll bar (including the background color of the arrow part)*/
scrollbar-3dlight-color: rgba(0,0,0,0.3); /*The bright edge of the three-dimensional scroll bar Color*/
scrollbar-highlight-color: rgba(0,0,0,0.5); /*Scroll bar highlight color (left shadow?)*/
scrollbar-shadow-color: rgba( 0,0,0,0.3); /*The color of the shadow of the three-dimensional scroll bar*/
scrollbar-darkshadow-color: rgba(0,0,0,0.3); /*The color of the outer shadow of the three-dimensional scroll bar*/
scrollbar-track-color: rgba(0,0,0,0.5); /*Three-dimensional scroll bar background color*/
scrollbar-base-color:rgba(0,0,0,0.5); / *The base color of the scroll bar*/
scrollbar-base-color:#666; /*The basic color of the scroll bar*/
scrollbar-arrow-color: #fff; /*The color of the triangular arrow*/
scrollbar-face-color: #666; /*The color of the three-dimensional scroll bar (including the background color of the arrow part)*/
scrollbar-3dlight-color: #666; /*The color of the bright edge of the three-dimensional scroll bar*/
scrollbar-highlight-color: #666; /*The highlight color of the scroll bar (left shadow?)*/
scrollbar-shadow-color: #666; /*The color of the three-dimensional scroll bar shadow*/
scrollbar-darkshadow-color: #666; /*The color of the outer shadow of the three-dimensional scroll bar*/
scrollbar-track-color: #666; /*The background color of the three-dimensional scroll bar*/
scrollbar-base- color:#666; /*Basic color of scroll bar*/
The above is the detailed content of Example case sharing of CSS custom scroll bar scrollbar-face-color. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：scrollbar-face-color in css is not a known css propertyNext article：scrollbar-face-color in css is not a known css property