css设置滚动条样式,css怎么设置滚动条样式

接上一篇，有的时候在项目里面会使用到滚动条
但是浏览器默认的滚动条的样式不怎么好看
这个时候需要进行一些处理
一般用到两种
1:隐藏滚动条，但是可以支持滚动的方法

::-webkit-scrollbar {display:none}

示例：
https://www.jianshu.com/p/9efdb18d92a6

2：自定义滚动条样式

.healthName::-webkit-scrollbar { /*滚动条整体样式*/ width: 10px; /*欣喜的小刺猬分别对应横竖滚动条的尺寸*/ height: 6px; } .healthName::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 10px; background-color: #02adf7; background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); } .healthName::-webkit-scrollbar-track { /*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #1b5aa9; }

示例：

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>div横向滚动条</title> <style> .healthName { width: 900px; height: 100px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; /* 父级元素中的内容不换行 */ } .healthName::-webkit-scrollbar { /*滚动条整体样式*/ width: 10px; /*欣喜的小刺猬分别对应横竖滚动条的尺寸*/ height: 6px; } .healthName::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 10px; background-color: #02adf7; background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); } .healthName::-webkit-scrollbar-track { /*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #1b5aa9; } .healthlist { display: inline-block; } </style> </head> <body> <div class="col-md-6 col-sm-6 col-xs-6 healthName">  </div> </body> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script> $.ajax({ url: "health.json", data: {}, type: 'GET', success: function(data) { var html = ""; $.each(data, function(i, item) { html += " <div class='healthlist'>"; html += "<img class='img' src=" + item.image1 + "/>"; html += "<p>" + item.doneNum + "</p>"; html += "<p>" + item.date + "</p>"; html += "<p>" + item.date + "</p></div>"; }) $(".healthName").append(html) } }); </script></html>

json:

[ { "image1": "images/fence/fence1.png", "doneNum": 130, "date": "120/78" }, { "image1": "images/fence/fence1.png", "doneNum": 80, "date": "120/78" }, { "image1": "images/fence/fence1.png", "doneNum": 90, "date": "120/78" }, { "image1": "images/fence/fence1.png", "doneNum": 90, "date": "120/78" }, { "image1": "images/fence/fence1.png", "doneNum": 90, "date": "120/78" }, { "image1": "images/fence/fence1.png", "doneNum": 90, "date": "120/78" }, { "image1": "images/fence/fence1.png", "doneNum": 90, "date": "120/78" }, { "image1": "images/fence/fence1.png", "doneNum": 90, "date": "120/78" }, { "image1": "images/fence/fence1.png", "doneNum": 90, "date": "120/78" }, { "image1": "images/fence/fence1.png", "doneNum": 90, "date": "120/78" }, { "image1": "images/fence/fence1.png", "doneNum": 90, "date": "120/78" }, { "image1": "images/fence/fence1.png", "doneNum": 90, "date": "120/78" }, { "image1": "images/fence/fence1.png", "doneNum": 90, "date": "120/78" }, { "image1": "images/fence/fence1.png", "doneNum": 90, "date": "120/78" }, { "image1": "images/fence/fence1.png", "doneNum": 90, "date": "120/78" }, { "image1": "images/fence/fence1.png", "doneNum": 90, "date": "120/78" }, { "image1": "images/fence/fence1.png", "doneNum": 90, "date": "120/78" }, { "image1": "images/fence/fence1.png", "doneNum": 110, "date": "120/78" }, { "image1": "images/fence/fence1.png", "doneNum": 52, "date": "120/78" }]

HTML div右边怎么加边框