> 웹 프론트엔드 > CSS 튜토리얼 > CSS 예제 스크롤바의 스크롤바 색상 설정에 대한 자세한 설명

CSS 예제 스크롤바의 스크롤바 색상 설정에 대한 자세한 설명

黄舟
풀어 주다: 2017-07-03 11:23:50
원래의
2450명이 탐색했습니다.

잠재적인 CSS 예---스크롤바 스크롤 막대 색상 설정

<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">
*********************
<STYLE>{
SCROLLBAR-FACE-COLOR:#3399cc; 
SCROLLBAR-HIGHLIGHT-COLOR: white; 
SCROLLBAR-SHADOW-COLOR: white; 
SCROLLBAR-ARROW-COLOR: #ffffff; 
SCROLLBAR-BASE-COLOR:#dff0c0}
</STYLE>
로그인 후 복사

그 중 SCROLLBAR-FACE-COLOR, SCROLLBAR-HIGHLIGHT-COLOR, SCROLLBAR-SHADOW-COLOR, SCROLLBAR-ARROW-COLOR, SCROLLBAR-BASE-COLOR, SCROLLBAR- DARKSHADOW -COLOR는 스크롤 막대의 다양한 부분의 색상을 지정하는 데 사용됩니다(의미에 따라 스크롤 막대의 어떤 부분을 나타내는지 알 수 있습니다).
페이지의 HTML 코드 사이에 다음 코드 줄을 추가하기만 하면 됩니다! ! ! !
:)

******************************************** ******* *****

스크롤바는 웹 페이지 오른쪽(하단)에 있는 세로(가로) 막대입니다. CSS 스타일 시트를 작성하여 스크롤 막대의 색상을 변경할 수 있습니다.
이 페이지는 녹색 스크롤 막대를 사용합니다.

스크롤 막대 CSS 스타일 시트:

 <style>
BODY {
   scrollbar-face-color: #008000;
   scrollbar-highlight-color: #0B0E2F;
   scrollbar-3dlight-color: #0B0E2F;
   scrollbar-darkshadow-color: #0B0E2F;
   scrollbar-shadow-color: #003366;
   scrollbar-arrow-color: #003366;
   scrollbar-track-color: #FFFFFF;}
</style>
로그인 후 복사


CSS 스타일 시트의 기능은 웹사이트의 글꼴 스타일, 색상 스타일, 마우스 스타일을 제어하는 ​​것입니다

종료 형식입니다.

녹색 코드
scrollbar-face-color: #008000;--스크롤 막대 색상
scrollbar-highlight-color: #0B0E2F;--스크롤 막대 강조 색상
스크롤 바- 3dlight-color : #0B0E2F;--스크롤 막대의 색상 3D
scrollbar-darkshadow-color: #0B0E2F;--스크롤 막대의 색상 darkshadow
scrollbar-shadow-color: #003366;--색상 스크롤 막대 그림자
scrollbar-arrow -color: #003366;--스크롤 막대 화살표의 색상
scrollbar-track-color: #FFFFFF;}--스크롤 막대 배경 색상


?? ??
????
#008000 "은 색상의 3원색 코드입니다. 색상을 마음대로 조정하고 다른 색상으로 교체할 수 있습니다.

************************************************ ** *********************

<STYLE>  
BODY  {  
SCROLLBAR-FACE-COLOR:  #fc0000;  
 SCROLLBAR-HIGHLIGHT-COLOR:  #fc0000;  
 SCROLLBAR-SHADOW-COLOR:  #fc0000;  
 SCROLLBAR-3DLIGHT-COLOR:  #fc0000;  
 SCROLLBAR-ARROW-COLOR:  #fcfc00;  
 SCROLLBAR-TRACK-COLOR:  #fc4800;  
 SCROLLBAR-DARKSHADOW-COLOR:  #fc0000;  
 SCROLLBAR-BASE-COLOR:  #fc0000  
}  
</STYLE>
로그인 후 복사


******************** ******* ******************************************* *****

body {
font-size:9pt;
color:#000099; cursor:url(meng.cur);
OVERFLOW-X
: auto; OVERFLOW: scroll;
SCROLLBAR-FACE-COLOR: #817af3;
SCROLLBAR-HIGHLIGHT-COLOR: #817af3;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #817af3;
SCROLLBAR-ARROW-COLOR: #e8f7e6;
SCROLLBAR-TRACK-COLOR: 817af3
SCROLLBAR-DARKSHADOW-COLOR: #e8f7e6;
}
로그인 후 복사


332 분할화면 스크롤바 색상설정

다른 스크롤바코드는 모두 삭제하고 아래 코드만 추가하세요. 각 해당 색상에 대한 설명이 나와 있습니다.

 set
Time
out(function setScrollbar(){      //color=Array
(面部颜色,上左斜面,下右斜面,上左边沿,箭头,底版色,下右边沿)      
color=Array("#EDE6DA","#EDE6DA","#EDE6DA","#EDE6DA","#84674A","#EDE6DA","#EDE6DA");      
box=Array("u","u1","d","r")
      for (var i=0;i<box.length;i++){            
eval("parent."+box[i]+".
document
.body.style.scrollbarFaceColor=color[0]");            
eval("parent."+box[i]+".document.body.style.scrollbarHighlightColor=color[1]");            
eval("parent."+box[i]+".document.body.style.scrollbarShadowColor=color[2]");
            eval("parent."+box[i]+".document.body.style.scrollbar3dLightColor=color[3]");            
eval("parent."+box[i]+".document.body.style.scrollbarArrowColor=color[4]");            
eval("parent."+box[i]+".document.body.style.scrollbarTrackColor=color[5]");
            eval("parent."+box[i]+".document.body.style.scrollbarDarkShadowColor=color[6]");      
};
setTimeout("setScrollbar()",300); 
},300);
로그인 후 복사

위 내용은 CSS 예제 스크롤바의 스크롤바 색상 설정에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
css
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿