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; /*捲軸的基色*/