Rumah > Artikel > hujung hadapan web > CSS自定义滚动条scrollbar-face-color的实例案例分享

CSS自定义滚动条scrollbar-face-color的实例案例分享

黄舟asal: 2017-07-03 10:59:381529semak imbas

CSS-scrollbar-face-color自定义滚动条

因网站需求，或者是页面的美观等特定需求下可以使用自定义滚动条的方式进行设置，下图是当前源码渲染的效果。

源码效果：

<!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：直接拷贝即可实现^_^

另附IE下的滚动条样式:

IE:
scrollbar-arrow-color: rgba(0,0,0,0.3); /三角箭头的颜色/
scrollbar-face-color: rgba(0,0,0,0.5); /立体滚动条的颜色（包括箭头部分的背景色）/
scrollbar-3dlight-color: rgba(0,0,0,0.3); /立体滚动条亮边的颜色/
scrollbar-highlight-color: rgba(0,0,0,0.5); /滚动条的高亮颜色（左阴影？）/
scrollbar-shadow-color: rgba(0,0,0,0.3); /立体滚动条阴影的颜色/
scrollbar-darkshadow-color: rgba(0,0,0,0.3); /立体滚动条外阴影的颜色/
scrollbar-track-color: rgba(0,0,0,0.5); /立体滚动条背景颜色/
scrollbar-base-color:rgba(0,0,0,0.5); /滚动条的基色/
scrollbar-base-color:#666; /滚动条的基本颜色/
scrollbar-arrow-color: #fff; /三角箭头的颜色/
scrollbar-face-color: #666; /立体滚动条的颜色（包括箭头部分的背景色）/
scrollbar-3dlight-color: #666; /立体滚动条亮边的颜色/
scrollbar-highlight-color: #666; /滚动条的高亮颜色（左阴影？）/
scrollbar-shadow-color: #666; /立体滚动条阴影的颜色/
scrollbar-darkshadow-color: #666; /立体滚动条外阴影的颜色/
scrollbar-track-color: #666; /立体滚动条背景颜色/
scrollbar-base-color:#666; /滚动条的基色/

Atas ialah kandungan terperinci CSS自定义滚动条scrollbar-face-color的实例案例分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：css中scrollbar-face-color不是已知的css属性Artikel seterusnya：css：scrollbar-arrow-color的使用与定义

Artikel berkaitan

Lihat lagi