CSS 사용자 정의 스크롤 막대 scrollbar-face-color의 사례 공유 예시
- 黄舟원래의
- 2017-07-03 10:59:381574검색
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) /*3차원 스크롤 막대의 색상(배경색 포함) 화살표 부분)*/
scrollbar- 3dlight-color: rgba(0,0,0,0.3) /*3차원 스크롤 막대의 밝은 가장자리 색상*/
scrollbar-highlight-color: rgba( 0,0,0,0.5); /*스크롤 막대의 높이 밝은 색상(왼쪽 그림자?)*/
scrollbar-shadow-color: rgba(0,0,0,0.3) /*3가지 색상- 차원 스크롤바 그림자*/
scrollbar-darkshadow-color: rgba(0,0, 0,0.3) /*3차원 스크롤 막대의 외부 그림자 색상*/
scrollbar-track-color: rgba(0 ,0,0,0.5); /*3차원 스크롤 막대의 배경색*/
scrollbar-base-color: rgba(0,0,0,0.5) /*스크롤 막대의 기본 색상* /
scrollbar-base-color:#666; /*스크롤 막대의 기본 색상*/
scrollbar-arrow-color: #fff; /* 삼각형 화살표의 색상*/
scrollbar-face-color: # 666; /*3차원 스크롤 막대의 색상(화살표 부분의 배경색 포함)*/
scrollbar-3dlight-color: #666 /*3차원 스크롤 막대의 밝은 가장자리 색상*/
scrollbar-highlight-color: #666; /*스크롤 막대 강조 색상(왼쪽 그림자?)*/
scrollbar-shadow-color: #666 /*3차원 스크롤 막대 그림자 색상*/
scrollbar-darkshadow- color: #666; /*3차원 스크롤 막대의 외부 그림자 색상*/
scrollbar-track-color: #666 /*3차원 스크롤 막대의 배경색*/
scrollbar-base; -color:#666; / *스크롤 막대 기본 색상*/
위 내용은 CSS 사용자 정의 스크롤 막대 scrollbar-face-color의 사례 공유 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.