집 > 기사 > 웹 프론트엔드 > CSS 예제 스크롤바의 스크롤바 색상 설정에 대한 자세한 설명

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

黄舟원래의: 2017-07-03 11:23:502369검색

잠재적인 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 스타일 시트의 기능은 웹사이트의 글꼴 스타일, 색상 스타일, 마우스 스타일을 제어하는 것입니다

c9ccee2e6ea535a969eb3f532ad9fe89로 시작합니다. 531ac245ce3e4fe3d50054a55f265927 종료 형식입니다.

녹색 코드
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：DIV 스크롤 막대 Firefox 호환성과 관련하여 js 모듈 scrollbar-dark-shadow-color:#eee를 요청하세요.다음 기사：DIV 스크롤 막대 Firefox 호환성과 관련하여 js 모듈 scrollbar-dark-shadow-color:#eee를 요청하세요.