9_滚动区域.html 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. ::-webkit-scrollbar{
  9. /* 隐藏滚动条滑块 */
  10. display: none;
  11. /* 滚动条宽度 */
  12. width: 0px;
  13. /* 滚动条高度 */
  14. height: 0px;
  15. }
  16. .box1{
  17. width: 300px;
  18. height: 100px;
  19. border: 1px solid black;
  20. /* 超出部分显示滚动条 */
  21. /* overflow: scroll; */
  22. /* 水平方向超出部分显示滚动条 */
  23. overflow-x: scroll;
  24. /* 垂直方向超出部分显示滚动条 */
  25. /* overflow-y: scroll; */
  26. }
  27. .box2{
  28. width: 600px;
  29. height: 100px;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div class="box1">
  35. <div class="box2">
  36. CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。
  37. 以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的时间和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。
  38. </div>
  39. </div>
  40. </body>
  41. </html>