Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 日本一级淫片观看,国产成人一区二区动漫精品,www.日韩在线观看 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          數十種自定義多彩多樣滾動條樣式
          
        
           
          
	
	
          
		數十種自定義多彩多樣滾動條樣式
          
                        
          c端開發過程中有沒有遇到過因為原生滾動條的樣式問題，讓整個項目事倍功半；有沒有遇到過因為因為默認滾動條的緣故，被客戶說頁面做得真chou，一條毀所有呀。
          接下來，下面你看到的，就是完美解決方案！當然，有這么多，不限制于這么多，隨意修改，百花盛開。

          Demo1

          css源碼
          .srcoll_one::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 border-radius: 10px;
 background-color: #F5F5F5;
}
.srcoll_one::-webkit-scrollbar{
 width: 12px;
 background-color: #F5F5F5;
}
.srcoll_one::-webkit-scrollbar-thumb{
 border-radius: 10px;
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
 background-color: #4078cb;
}
          html源碼
          <div class="srcoll_one">
 <div class="item"></div>
</div>
          Demo2

          css源碼
          .srcoll_two::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
 background-color: #F5F5F5;
 border-radius: 10px;
}
.srcoll_two::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_two::-webkit-scrollbar-thumb{
 border-radius: 10px;
 background-color: #FFF;
 background-image: -webkit-linear-gradient(top,
 #e4f5fc 0%,
 #bfe8f9 50%,
 #9fd8ef 51%,
 #2ab0ed 100%);
}
          html源碼
          <div class="srcoll_two">
 <div class="item"></div>
</div>
          Demo3

          css源碼
          .srcoll_three::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
 background-color: #F5F5F5;
 border-radius: 10px;
}
.srcoll_three::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_three::-webkit-scrollbar-thumb{
 border-radius: 10px;
 background-color: #FFF;
 background-image: -webkit-gradient(linear,
 40% 0%,
 75% 84%,
 from(#4D9C41),
 to(#19911D),
 color-stop(.6,#54DE5D))
}
          html源碼
          <div class="srcoll_three">
 <div class="item"></div>
</div>
          Demo4

          css源碼
          .srcoll_four::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 border-radius: 10px;
 background-color: #F5F5F5;
}
.srcoll_four::-webkit-scrollbar{
 width: 12px;
 background-color: #F5F5F5;
}
.srcoll_four::-webkit-scrollbar-thumb{
 border-radius: 10px;
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
 background-color: #D62929;
}
          html源碼
          <div class="srcoll_four">
 <div class="item"></div>
</div>
          Demo5

          css源碼
          .srcoll_five::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
.srcoll_five::-webkit-scrollbar{
 width: 6px;
 background-color: #F5F5F5;
}
.srcoll_five::-webkit-scrollbar-thumb{
	background-color: #000000;
}

          html源碼
          <div class="srcoll_five">
 <div class="item"></div>
</div>

          Demo6

          css源碼
          .srcoll_six::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
.srcoll_six::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_six::-webkit-scrollbar-thumb{
 background-color: #000000;
 border: 2px solid #555555;
}

          html源碼
          <div class="srcoll_six">
 <div class="item"></div>
</div>

          Demo7

          css源碼
          .srcoll_seven::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
.srcoll_seven::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_seven::-webkit-scrollbar-thumb{
 background-color: #0ae;
 background-image: -webkit-gradient(linear, 0 0, 0 100%,
 color-stop(.5, rgba(255, 255, 255, .2)),
 color-stop(.5, transparent), to(transparent));
}

          html源碼
          <div class="srcoll_seven">
 <div class="item"></div>
</div>

          Demo8

          css源碼
          .srcoll_eight::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
.srcoll_eight::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_eight::-webkit-scrollbar-thumb{
 background-color: #F90;
 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)
}

          html源碼
          <div class="srcoll_eight">
 <div class="item"></div>
</div>

          Demo9

          css源碼
          .srcoll_nine::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 border-radius: 10px;
}
.srcoll_nine::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_nine::-webkit-scrollbar-thumb{
 border-radius: 10px;
 background-image: -webkit-gradient(linear,
 left bottom,
 left top,
 color-stop(0.44, rgb(122,153,217)),
 color-stop(0.72, rgb(73,125,189)),
 color-stop(0.86, rgb(28,58,148)));
}

          html源碼
          <div class="srcoll_nine">
 <div class="item"></div>
</div>

          Demo10

          css源碼
          .srcoll_ten::-webkit-scrollbar-track{
 border: 1px solid black;
 background-color: #F5F5F5;
}
.srcoll_ten::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_ten::-webkit-scrollbar-thumb{
	background-color: #000000;
}

          html源碼
           <div class="srcoll_ten">
 <div class="item"></div>
</div>

          Demo11

          css源碼
          .srcoll_eleven::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
.srcoll_eleven::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_eleven::-webkit-scrollbar-thumb{
 background-color: #F90;
 background-image: -webkit-linear-gradient(90deg,
 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)
}

          html源碼
          <div class="srcoll_eleven">
 <div class="item"></div>
</div>

          Demo12

          css源碼
          .srcoll_twelve::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 border-radius: 10px;
}
.srcoll_twelve::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_twelve::-webkit-scrollbar-thumb{
 background-color: #AAA;
 border-radius: 10px;
 background-image: -webkit-linear-gradient(90deg,
 rgba(0, 0, 0, .2) 25%,
 transparent 25%,
 transparent 50%,
 rgba(0, 0, 0, .2) 50%,
 rgba(0, 0, 0, .2) 75%,
 transparent 75%,
 transparent)
}

          html源碼
          <div class="srcoll_twelve">
 <div class="item"></div>
</div>

          Demo13

          css源碼
          .srcoll_thirteen::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 border-radius: 10px;
}
.srcoll_thirteen::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;
}
.srcoll_thirteen::-webkit-scrollbar-thumb{
 background-color: #3366FF;
 border-radius: 10px;
 background-image: -webkit-linear-gradient(0deg,
 rgba(255, 255, 255, 0.5) 25%,
 transparent 25%,
 transparent 50%,
 rgba(255, 255, 255, 0.5) 50%,
 rgba(255, 255, 255, 0.5) 75%,
 transparent 75%,
 transparent)
}

          html源碼
          <div class="srcoll_thirteen">
 <div class="item"></div>
</div>

          Demo14

          css源碼
          .srcoll_fourteen::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
 border-radius: 10px;
 background-color: #444444;
}
.srcoll_fourteen::-webkit-scrollbar{
 width: 12px;
 background-color: #F5F5F5;
}
.srcoll_fourteen::-webkit-scrollbar-thumb{
 border-radius: 10px;
 background-color: #D62929;
 background-image: -webkit-linear-gradient(90deg,
 transparent,
 rgba(0, 0, 0, 0.4) 50%,
 transparent,
 transparent)
}

          html源碼
          <div class="srcoll_fourteen">
 <div class="item"></div>
</div>




          搬你想搬，蓋你所需，碼字不易，且行且珍惜！

          我們深入探索技術新領域的過程中，總會碰到一些意想不到的驚喜，這些新發現挑戰著我們原有的認知，并為我們的開發工作開辟了新天地。最近，在審視我所負責的項目時，我注意到了一個小小的但極為關鍵的改變，這讓我不得不重新思考我對于CSS滾動條樣式的理解，并深刻感受到了技術進步帶來的樂趣。
          這個問題起初很簡單：我的滾動條與團隊其他成員設計的UI風格顯得格格不入。經過仔細比較和研究后，我意識到了問題所在——scrollbar-color和scrollbar-width這兩個CSS屬性。在我經常使用的Chrome瀏覽器中，這些屬性以前是不支持的。但是，隨著Chrome瀏覽器更新到121版本，情況發生了翻天覆地的變化。
          html {
    scrollbar-width: auto;
    scrollbar-color: #aaa #aaa;
}


          這個變化不僅意味著我們現在可以使用標準的CSS屬性來定制美觀的滾動條，而且標志著我們在創造更加統一和互動的用戶體驗方面向前邁出了一大步。在過去，要在Chrome上實現自定義滾動條效果，我們不得不依賴于::-webkit-*偽選擇器，這種做法雖然可以工作，但因其僅在Chrome和Safari上有效，而Firefox不支持，因此其局限性和不一致性一直受到批評。
          html {
	overflow: overlay;
	scrollbar-color: #6d7c77 #cfd7c7;
	scrollbar-width: auto;
}

body::-webkit-scrollbar {
	width: 8px;
}

body::-webkit-scrollbar-thumb {
	background: var(--scroll-thumb-color);
	border-radius: 10px;
}

body::-webkit-scrollbar-track {
	background: var(--scroll-track-color);
	border-radius: 10px;
}


          在Chrome 121版本之后，繼續使用::-webkit-*偽選擇器可能會導致樣式與預期不符，更多詳情可以在Chrome開發者文檔中查閱。
          為了適應這種變化，我們可以將新的滾動條屬性應用于body元素，確保在Chrome中的兼容性，即便是Firefox可能還未完全支持這些屬性。
          body {
    scrollbar-width: auto;
    scrollbar-color: #aaa #aaa;
}


          通過查閱資料，我了解到Chrome團隊最近發布了一篇博客文章，詳細介紹了這項改變。這篇文章不僅讓我們有機會深入了解滾動條樣式是如何受到操作系統影響的，還提供了一個快速應對策略：對于不支持::-webkit-*偽選擇器的瀏覽器，我們可以通過添加一個@supports規則來檢測并應用新的滾動條屬性。
          body::-webkit-scrollbar {
	width: 8px;
}

body::-webkit-scrollbar-thumb {
    background: var(--custom-thumb-color);
    border-radius: 16px;
}

body::-webkit-scrollbar-track {
    background: var(--custom-track-color);
    border-radius: 16px;
}

/* 針對不支持::-webkit-scrollbar-*的瀏覽器的樣式調整 */
@supports not (selector(::-webkit-scrollbar)) {
    html {
        scrollbar-width: auto;
        scrollbar-color: #bbb #bbb;
    }
}


          看到這里，還不快快去看看自己項目的滾動條有沒有問題

          作者：BrittanyZ
          鏈接：https://juejin.cn/post/7330826811491287059
          例
          標記一個內聯框架：
          <iframe src="http://www.runoob.com"></iframe>
          瀏覽器支持
          所有主流瀏覽器都支持 <iframe> 標簽。
          標簽定義及使用說明
          <iframe> 標簽規定一個內聯框架。
          一個內聯框架被用來在當前 HTML 文檔中嵌入另一個文檔。
          提示和注釋
          提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之間，這樣就可以應對不支持 <iframe> 的瀏覽器。
          提示：使用 CSS 為 <iframe> （包括滾動條）定義樣式。
          HTML 4.01 與 HTML5之間的差異
          HTML5 新增了一些新的屬性，同時去掉了 HTML 4.01 中的一些屬性。
          HTML 與 XHTML 之間的差異
          在 XHTML 中，name 屬性已被廢棄，并將被去掉。請使用 id 屬性代替。
          屬性
          New ：HTML5 中的新屬性。
          屬性值描述
          alignleftrighttopmiddlebottomHTML5 不支持。HTML 4.01 已廢棄。 規定如何根據周圍的元素來對齊 <iframe>。
          frameborder10HTML5 不支持。規定是否顯示 <iframe> 周圍的邊框。
          heightpixels規定 <iframe> 的高度。
          longdescURLHTML5 不支持。規定一個頁面，該頁面包含了有關 <iframe> 的較長描述。
          marginheightpixelsHTML5 不支持。規定 <iframe> 的頂部和底部的邊距。
          marginwidthpixelsHTML5 不支持。規定 <iframe> 的左側和右側的邊距。
          namename規定 <iframe> 的名稱。
          sandboxNew""allow-formsallow-same-originallow-scriptsallow-top-navigation對 <iframe> 的內容定義一系列額外的限制。
          scrollingyesnoautoHTML5 不支持。規定是否在 <iframe> 中顯示滾動條。
          seamlessNewseamless規定 <iframe> 看起來像是父文檔中的一部分。
          srcURL規定在 <iframe> 中顯示的文檔的 URL。
          srcdocNewHTML_code規定頁面中的 HTML 內容顯示在 <iframe> 中。
          widthpixels規定 <iframe> 的寬度。
          全局屬性
          <iframe> 標簽支持 HTML 的全局屬性。
          事件屬性
          <iframe> 標簽支持 HTML 的事件屬性。
          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
性盈盈影院免费视频观看在线一区
|
日韩精品国产一区|
国产精品视频一区国模私拍|
一区五十路在线中出|
一区二区和激情视频|
超清无码一区二区三区|
一区一区三区产品乱码|
精品一区二区三区免费观看|
视频在线观看一区|
中文字幕日韩欧美一区二区三区|
国产视频一区在线观看|
色综合视频一区二区三区|
精品无码国产AV一区二区三区|
亚洲视频免费一区|
人妻无码一区二区不卡无码av|
国产成人精品一区二区秒拍
|
精品国产AV无码一区二区三区|
久久无码AV一区二区三区|
亚洲一区二区中文|
无码精品国产一区二区三区免费|
日韩一本之道一区中文字幕|
国产美女露脸口爆吞精一区二区
|
国产凹凸在线一区二区|
久夜色精品国产一区二区三区|
亚洲一区二区三区在线播放|
三级韩国一区久久二区综合|
无码精品人妻一区二区三区免费|
福利一区二区在线|
岛国精品一区免费视频在线观看|
国产91精品一区二区麻豆亚洲
|
国产成人精品日本亚洲专一区
|
精品无码人妻一区二区三区不卡|
波多野结衣中文字幕一区二区三区|
国产免费私拍一区二区三区|
国产亚洲福利精品一区二区|
无码人妻久久一区二区三区蜜桃|
精品亚洲一区二区三区在线播放|
日本一区二区三区在线观看|
亚洲一区精彩视频|
国产在线精品观看一区|
日韩精品人妻一区二区中文八零|