首頁 > web前端 > css教學 > css如何自訂捲軸(程式碼)

css如何自訂捲軸(程式碼)

不言
發布: 2018-07-21 11:50:23
原創
2951 人瀏覽過

這篇文章要跟大家分享的是關於css如何自訂捲軸(程式碼),內容很不錯,有需要的朋友可以參考一下,希望可以幫助大家。

html↓

<p></p>
登入後複製

css↓

#
.test {
      display: inline-block;
      margin: 60px 40%;
      width: 280px;
      padding: 5px 4px;
      min-height: 20px;
      line-height: 20px;
      max-height: 72px;
      border: 1px solid #ccc;
      font-size: 12px;
      word-wrap: break-word;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-user-modify: read-write-plaintext-only;
      border-radius: 4px;
    }
      .test::-webkit-scrollbar {
      width: 4px;
      height: 1px;
    }
    .test::-webkit-scrollbar-thumb {
      border-radius: 4px;
      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      background: #C8C8C8;
    }
    .test::-webkit-scrollbar-track {
      border-radius: 4px;
      background-color: #FFFFFF;
    }
登入後複製

效果圖

css如何自訂捲軸(程式碼)

##    

相關建議:
如何使用Css實作圓角邊框的效果

實作css虛線樣式的兩種方式:dotted和dashed(實例)
######

以上是css如何自訂捲軸(程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板