CSS自定義滑動列表上部提示陰影

2021-08-21 16:30:12 字數 730 閱讀 2154

效果圖：

dom結構：

我們可以利用這種陰影的形式來提示使用者，列表還有更多的內容。當在最上層時，沒有陰影，隨著下拉條向下滑動陰影逐漸加深，然後顏色持續不變。

為了實現這種效果，我們可以在列表頂部設定乙個圓弧狀的背景，為由淡灰色到透明色的漸變，css**如下：

.scrollnote
但是我們可以發現，不管如何滾動，在上部的半弧形陰影都不會有任何變化，但是如果我們使用local屬性定位背景，該陰影又只能在頂部呈現而不能擁有隨著滑動漸變的效果。為了實現這個效果，我們需要利用雙重背景，在灰色的頂部弧上覆蓋一層由白向透明背景，屬性為local，效果如下（為了更清楚顯示，顏色暫時為紅色）：

css**如下：

.scrollnote
這樣就呈現出了，我們需要的效果：

自定義列表

自定義列表不僅僅是一列專案，而是專案及其注釋的組合。自定義列表以 標籤開始。每個自定義列表項以 開始。每個自定義列表項的定義以 開始。娛樂明星 港台東南亞明星 內地明星 南韓明星 日本明星 時尚人物 愛綜藝內地綜藝 台灣綜藝 南韓綜藝 時尚生活服務 體育運動健身 追劇狂南韓電視劇集 香港電視劇集美劇...

自定義滑鼠提示

做本次實驗用的ie6和firefox2.0.0.17 title this is a paragraph move your mouse over the red square.custom tooltip more details can go here.1.元素的title標籤表示的是滑鼠懸停在...

CSS計數器（自定義列表）

css3計數器 css counters 可以允許我們使用css對頁面中的任意元素進行計數，實現類似於有序列表的功能 自定義有序列表 與有序列表相比，它的突出特性在於可以對任意元素計數，同時實現個性化計數 定義計數器 設定計數器的增數規則 自定義列表樣式 呼叫計數器 counter reset no...