Html,Css美化滚动条（附上图例）
有没有觉得html默认的滚动条样式丑到爆炸，但是自己又不会修改，下面让我来手把手教你如何更改滚动条的而样式，代码简单易懂，开箱即用！
我就是cv工程师！！！
来看看一般的滚动条
妈呀是不是感觉很丑，现在来看看我美化过的滚动条
虽然也没有多好看，但是也比原始的强吧
话不多说，上菜！！！
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {display: flex;}.firstBox {width: 200px;height: 300px;border: 1px solid #ccc;overflow-y: auto;}.nextBox {width: 200px;height: 300px;border: 1px solid #ccc;margin-left: 20px;overflow-y: auto;}.nextBox::-webkit-scrollbar {/*滚动条宽*/width: 4px;}.nextBox::-webkit-scrollbar-thumb {/*正在滑动的小块*/border-radius: 10px;background-color: rgb(35, 98, 246);}.nextBox::-webkit-scrollbar-track {/*滚动内部轨道*/box-shadow: inset 0 0 5px rgba(186, 32, 32, 0.2);background: rgb(140, 140, 158);border-radius: 10px;}</style>
</head><body><div class="firstBox">原始滚动条<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li></ul></div><div class="nextBox">美化的滚动条<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li></ul></div></body></html>
##### 好了，今天的分享就到这里，相关解释都在代码里面，下次再见。