CSS自定義滑動(dòng)塊形狀可以為頁面增添不同的設(shè)計(jì)效果。通過使用“range”輸入類型，可以實(shí)現(xiàn)在滑動(dòng)條中拖動(dòng)，同時(shí)顯示數(shù)值。而通過使用CSS樣式，可以自定義滑動(dòng)塊的形狀以及背景顏色等效果。

/*通過input[type="range"]選擇器選擇range類型的輸入元素*/
input[type="range"]{
/*定義滑動(dòng)條的寬度和高度*/
width: 200px;
height: 10px;
/*設(shè)置軌道和滑塊的默認(rèn)值*/
-webkit-appearance: none;
}
/*定義滑塊的樣式*/
input[type="range"]::-webkit-slider-thumb{
/*將滑動(dòng)塊變?yōu)橐粋€(gè)圓形*/
-webkit-appearance: none;
/*定義滑塊的寬度和高度*/
width: 20px;
height: 20px;
/*定義滑塊的圓角*/
border-radius: 50%;
/*定義滑塊的顏色*/
background-color: #ff9900;
}
/*定義滑動(dòng)條軌道的樣式*/
input[type="range"]::-webkit-slider-runnable-track{
/*定義軌道的高度和顏色*/
height: 10px;
background-color: #ccc;
}

在上面的代碼中，首先通過選擇器選擇range類型的輸入元素，并定義了寬度和高度。接下來使用“::-webkit-slider-thumb”偽類定義了滑塊的樣式，將它變成圓形，并設(shè)置了寬度、高度、圓角和顏色。最后使用“::-webkit-slider-runnable-track”偽類定義了軌道的樣式，定義了軌道的高度和顏色。

同時(shí)，還可以通過box-shadow屬性創(chuàng)建陰影效果，使滑塊看起來更加立體化。

input[type="range"]::-webkit-slider-thumb{
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ff9900;
/*在滑塊的底部創(chuàng)建一個(gè)白色的陰影*/
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8); 
}

通過以上的CSS樣式代碼，就可以自定義滑動(dòng)塊的形狀和顏色等效果，為頁面增添不同的設(shè)計(jì)效果。