検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSサンプルスクロールバーのスクロールバーの色の設定を詳しく解説

CSSサンプルスクロールバーのスクロールバーの色の設定を詳しく解説

黄舟
黄舟オリジナル
2017-07-03 11:23:502455ブラウズ

考えられる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で始まり、

緑色のコード
 スクロールバーフェイスカラー: #008000;--スクロールバーバーの色
-ハイライトカラー: #0B0E2F;--スクロールバーハイライトの色
スクロールバー- 3dlight-color : #0B0E2F;-- スクロール バーの色 3D
スクロールバー-darkshadow-color: #0B0E2F;-- スクロール バーのダークシャドウの色
スクロールバー-shadow-color: #003366;-- 色スクロールバーの影の色
スクロールバー矢印 -color: #003366;--スクロールバーの矢印の色
スクロールバートラックカラー: #FFFFFF;}-- スクロールバーの背景の色

?? ??
????
「#008000 」は色の三原色コードです。色を自由に調整したり、別の色に置き換えたりできます。

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

<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 分割画面スクロールバーの色の設定

他のスクロールバーコードをすべて削除し、次のコードのみを追加します。それぞれの対応色について説明します。

りー

以上がCSSサンプルスクロールバーのスクロールバーの色の設定を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：DIV スクロール バー Firefox の互換性については、js モジュール スクロールバー-dark-shadow-color:#eee; を問い合わせてください。次の記事：DIV スクロール バー Firefox の互換性については、js モジュール スクロールバー-dark-shadow-color:#eee; を問い合わせてください。

関連記事

続きを見る