啥都不说先看图:
注: 只适合chrom,不适用IE和fireFox
下面展示代码:
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>CSS3自定义滚动条-轩枫阁</title> 5 <style> 6 header 7 { 8 font-family: 'Lobster', cursive; 9 text-align: center; 10 font-size: 25px; 11 } 12 13 #info 14 { 15 font-size: 18px; 16 color: #555; 17 text-align: center; 18 margin-bottom: 25px; 19 } 20 21 a{ 22 color: #074E8C; 23 } 24 25 .scrollbar 26 { 27 margin-left: 30px; 28 float: left; 29 height: 300px; 30 width: 65px; 31 background: #F5F5F5; 32 overflow-y: scroll; 33 margin-bottom: 25px; 34 } 35 36 .force-overflow 37 { 38 min-height: 450px; 39 } 40 41 #wrapper 42 { 43 text-align: center; 44 width: 500px; 45 margin: auto; 46 } 47 48 /* 49 * STYLE 1 50 */ 51 52 #style-1::-webkit-scrollbar-track 53 { 54 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 55 border-radius: 10px; 56 background-color: #F5F5F5; 57 } 58 59 #style-1::-webkit-scrollbar 60 { 61 width: 12px; 62 background-color: #F5F5F5; 63 } 64 65 #style-1::-webkit-scrollbar-thumb 66 { 67 border-radius: 10px; 68 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 69 background-color: #555; 70 } 71 72 /* 73 * STYLE 2 74 */ 75 76 #style-2::-webkit-scrollbar-track 77 { 78 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 79 border-radius: 10px; 80 background-color: #F5F5F5; 81 } 82 83 #style-2::-webkit-scrollbar 84 { 85 width: 12px; 86 background-color: #F5F5F5; 87 } 88 89 #style-2::-webkit-scrollbar-thumb 90 { 91 border-radius: 10px; 92 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 93 background-color: #D62929; 94 } 95 96 /* 97 * STYLE 3 98 */ 99 100 #style-3::-webkit-scrollbar-track 101 { 102 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 103 background-color: #F5F5F5; 104 } 105 106 #style-3::-webkit-scrollbar 107 { 108 width: 6px; 109 background-color: #F5F5F5; 110 } 111 112 #style-3::-webkit-scrollbar-thumb 113 { 114 background-color: #000000; 115 } 116 117 /* 118 * STYLE 4 119 */ 120 121 #style-4::-webkit-scrollbar-track 122 { 123 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 124 background-color: #F5F5F5; 125 } 126 127 #style-4::-webkit-scrollbar 128 { 129 width: 10px; 130 background-color: #F5F5F5; 131 } 132 133 #style-4::-webkit-scrollbar-thumb 134 { 135 background-color: #000000; 136 border: 2px solid #555555; 137 } 138 139 140 /* 141 * STYLE 5 142 */ 143 144 #style-5::-webkit-scrollbar-track 145 { 146 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 147 background-color: #F5F5F5; 148 } 149 150 #style-5::-webkit-scrollbar 151 { 152 width: 10px; 153 background-color: #F5F5F5; 154 } 155 156 #style-5::-webkit-scrollbar-thumb 157 { 158 background-color: #0ae; 159 160 background-image: -webkit-gradient(linear, 0 0, 0 100%, 161 color-stop(.5, rgba(255, 255, 255, .2)), 162 color-stop(.5, transparent), to(transparent)); 163 } 164 165 166 /* 167 * STYLE 6 168 */ 169 170 #style-6::-webkit-scrollbar-track 171 { 172 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 173 background-color: #F5F5F5; 174 } 175 176 #style-6::-webkit-scrollbar 177 { 178 width: 10px; 179 background-color: #F5F5F5; 180 } 181 182 #style-6::-webkit-scrollbar-thumb 183 { 184 background-color: #F90; 185 background-image: -webkit-linear-gradient(45deg, 186 rgba(255, 255, 255, .2) 25%, 187 transparent 25%, 188 transparent 50%, 189 rgba(255, 255, 255, .2) 50%, 190 rgba(255, 255, 255, .2) 75%, 191 transparent 75%, 192 transparent) 193 } 194 195 196 /* 197 * STYLE 7 198 */ 199 200 #style-7::-webkit-scrollbar-track 201 { 202 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 203 background-color: #F5F5F5; 204 border-radius: 10px; 205 } 206 207 #style-7::-webkit-scrollbar 208 { 209 width: 10px; 210 background-color: #F5F5F5; 211 } 212 213 #style-7::-webkit-scrollbar-thumb 214 { 215 border-radius: 10px; 216 background-image: -webkit-gradient(linear, 217 left bottom, 218 left top, 219 color-stop(0.44, rgb(122,153,217)), 220 color-stop(0.72, rgb(73,125,189)), 221 color-stop(0.86, rgb(28,58,148))); 222 } 223 224 /* 225 * STYLE 8 226 */ 227 228 #style-8::-webkit-scrollbar-track 229 { 230 border: 1px solid black; 231 background-color: #F5F5F5; 232 } 233 234 #style-8::-webkit-scrollbar 235 { 236 width: 10px; 237 background-color: #F5F5F5; 238 } 239 240 #style-8::-webkit-scrollbar-thumb 241 { 242 background-color: #000000; 243 } 244 245 246 /* 247 * STYLE 9 248 */ 249 250 #style-9::-webkit-scrollbar-track 251 { 252 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 253 background-color: #F5F5F5; 254 } 255 256 #style-9::-webkit-scrollbar 257 { 258 width: 10px; 259 background-color: #F5F5F5; 260 } 261 262 #style-9::-webkit-scrollbar-thumb 263 { 264 background-color: #F90; 265 background-image: -webkit-linear-gradient(90deg, 266 rgba(255, 255, 255, .2) 25%, 267 transparent 25%, 268 transparent 50%, 269 rgba(255, 255, 255, .2) 50%, 270 rgba(255, 255, 255, .2) 75%, 271 transparent 75%, 272 transparent) 273 } 274 275 276 /* 277 * STYLE 10 278 */ 279 280 #style-10::-webkit-scrollbar-track 281 { 282 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 283 background-color: #F5F5F5; 284 border-radius: 10px; 285 } 286 287 #style-10::-webkit-scrollbar 288 { 289 width: 10px; 290 background-color: #F5F5F5; 291 } 292 293 #style-10::-webkit-scrollbar-thumb 294 { 295 background-color: #AAA; 296 border-radius: 10px; 297 background-image: -webkit-linear-gradient(90deg, 298 rgba(0, 0, 0, .2) 25%, 299 transparent 25%, 300 transparent 50%, 301 rgba(0, 0, 0, .2) 50%, 302 rgba(0, 0, 0, .2) 75%, 303 transparent 75%, 304 transparent) 305 } 306 307 308 /* 309 * STYLE 11 310 */ 311 312 #style-11::-webkit-scrollbar-track 313 { 314 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 315 background-color: #F5F5F5; 316 border-radius: 10px; 317 } 318 319 #style-11::-webkit-scrollbar 320 { 321 width: 10px; 322 background-color: #F5F5F5; 323 } 324 325 #style-11::-webkit-scrollbar-thumb 326 { 327 background-color: #3366FF; 328 border-radius: 10px; 329 background-image: -webkit-linear-gradient(0deg, 330 rgba(255, 255, 255, 0.5) 25%, 331 transparent 25%, 332 transparent 50%, 333 rgba(255, 255, 255, 0.5) 50%, 334 rgba(255, 255, 255, 0.5) 75%, 335 transparent 75%, 336 transparent) 337 } 338 339 /* 340 * STYLE 12 341 */ 342 343 #style-12::-webkit-scrollbar-track 344 { 345 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9); 346 border-radius: 10px; 347 background-color: #444444; 348 } 349 350 #style-12::-webkit-scrollbar 351 { 352 width: 12px; 353 background-color: #F5F5F5; 354 } 355 356 #style-12::-webkit-scrollbar-thumb 357 { 358 border-radius: 10px; 359 background-color: #D62929; 360 background-image: -webkit-linear-gradient(90deg, 361 transparent, 362 rgba(0, 0, 0, 0.4) 50%, 363 transparent, 364 transparent) 365 } 366 367 /* 368 * STYLE 13 369 */ 370 371 #style-13::-webkit-scrollbar-track 372 { 373 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9); 374 border-radius: 10px; 375 background-color: #CCCCCC; 376 } 377 378 #style-13::-webkit-scrollbar 379 { 380 width: 12px; 381 background-color: #F5F5F5; 382 } 383 384 #style-13::-webkit-scrollbar-thumb 385 { 386 border-radius: 10px; 387 background-color: #D62929; 388 background-image: -webkit-linear-gradient(90deg, 389 transparent, 390 rgba(0, 0, 0, 0.4) 50%, 391 transparent, 392 transparent) 393 } 394 395 /* 396 * STYLE 14 397 */ 398 399 #style-14::-webkit-scrollbar-track 400 { 401 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6); 402 background-color: #CCCCCC; 403 } 404 405 #style-14::-webkit-scrollbar 406 { 407 width: 10px; 408 background-color: #F5F5F5; 409 } 410 411 #style-14::-webkit-scrollbar-thumb 412 { 413 background-color: #FFF; 414 background-image: -webkit-linear-gradient(90deg, 415 rgba(0, 0, 0, 1) 0%, 416 rgba(0, 0, 0, 1) 25%, 417 transparent 100%, 418 rgba(0, 0, 0, 1) 75%, 419 transparent) 420 } 421 422 /* 423 * STYLE 15 424 */ 425 426 #style-15::-webkit-scrollbar-track 427 { 428 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); 429 background-color: #F5F5F5; 430 border-radius: 10px; 431 } 432 433 #style-15::-webkit-scrollbar 434 { 435 width: 10px; 436 background-color: #F5F5F5; 437 } 438 439 #style-15::-webkit-scrollbar-thumb 440 { 441 border-radius: 10px; 442 background-color: #FFF; 443 background-image: -webkit-gradient(linear, 444 40% 0%, 445 75% 84%, 446 from(#4D9C41), 447 to(#19911D), 448 color-stop(.6,#54DE5D)); 449 } 450 451 /* 452 * STYLE 16 453 */ 454 455 #style-16::-webkit-scrollbar-track 456 { 457 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); 458 background-color: #F5F5F5; 459 border-radius: 10px; 460 } 461 462 #style-16::-webkit-scrollbar 463 { 464 width: 10px; 465 background-color: #F5F5F5; 466 } 467 468 #style-16::-webkit-scrollbar-thumb 469 { 470 border-radius: 10px; 471 background-color: #FFF; 472 background-image: -webkit-linear-gradient(top, 473 #e4f5fc 0%, 474 #bfe8f9 50%, 475 #9fd8ef 51%, 476 #2ab0ed 100%); 477 } 478 479 /* 480 * body 481 */ 482 body::-webkit-scrollbar-track 483 { 484 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); 485 background-color: #F5F5F5; 486 border-radius: 10px; 487 } 488 489 body::-webkit-scrollbar 490 { 491 width: 10px; 492 background-color: #F5F5F5; 493 } 494 495 body::-webkit-scrollbar-thumb 496 { 497 border-radius: 10px; 498 background-color: #FFF; 499 background-image: -webkit-gradient(linear,40% 0%,75% 84%,from(#4D9C41),to(#19911D),color-stop(.6,#54DE5D)); 500 } 501 502 </style> 503 </head> 504 <body> 505 <div id="wrapper"> 506 <div class="scrollbar" id="style-default"> 507 <div class="force-overflow"></div> 508 </div> 509 510 <div class="scrollbar" id="style-1"> 511 <div class="force-overflow"></div> 512 </div> 513 514 <div class="scrollbar" id="style-2"> 515 <div class="force-overflow"></div> 516 </div> 517 518 <div class="scrollbar" id="style-3"> 519 <div class="force-overflow"></div> 520 </div> 521 522 <div class="scrollbar" id="style-4"> 523 <div class="force-overflow"></div> 524 </div> 525 526 <div class="scrollbar" id="style-5"> 527 <div class="force-overflow"></div> 528 </div> 529 530 <div class="scrollbar" id="style-6"> 531 <div class="force-overflow"></div> 532 </div> 533 534 <div class="scrollbar" id="style-7"> 535 <div class="force-overflow"></div> 536 </div> 537 538 <div class="scrollbar" id="style-8"> 539 <div class="force-overflow"></div> 540 </div> 541 542 <div class="scrollbar" id="style-9"> 543 <div class="force-overflow"></div> 544 </div> 545 546 <div class="scrollbar" id="style-10"> 547 <div class="force-overflow"></div> 548 </div> 549 550 <div class="scrollbar" id="style-11"> 551 <div class="force-overflow"></div> 552 </div> 553 554 <div class="scrollbar" id="style-13"> 555 <div class="force-overflow"></div> 556 </div> 557 558 <div class="scrollbar" id="style-14"> 559 <div class="force-overflow"></div> 560 </div> 561 562 <div class="scrollbar" id="style-15"> 563 <div class="force-overflow"></div> 564 </div> 565 </div> 566 </body> 567 </html>