純css寫的各種小按鈕合集,記錄下來成為學習筆記

2021-10-24 06:20:42 字數 2323 閱讀 7847

一看就能懂啦,主要說一下

↑沒用這個屬性。那麼通過z-index來調整只能夠要麼背景蓋住,要麼在背景之前。亦或是改變透明度這樣並不好。所以使用mix-blend-mode屬性。

不在贅述 巧用before 通過變幻屬性來達到效果。

html

="test test-1"

>

="scrollbar"

>

<

/div>

<

!-- 在火狐瀏覽器上無法實現 --

>

<

/div>

="test test-5"

>

="scrollbar"

>

<

/div>

<

/div>css

.test

.scrollbar

.test:

:-webkit-scrollbar

.test:

:-webkit-scrollbar-thumb

.test:

:-webkit-scrollbar-track

/* 藍色的滾條 */

學習了bootstrap或是jquery-ui等等之後好像要達到我們想要的樣式越來越容易了,但是純css設計出來的按鈕也不賴。還能鞏固一些css樣式的屬性等等。是值得學習的

純css寫乙個好看的按鈕

以下開關按鈕,主要還是css陰影的使用,大多數人知都卻很少用的,單個元素可以使用多重陰影效果 以下是css 開關站 m switch station m switch station u head m switch station u head p m switch station u body m...

純css實現各種方向小箭頭

在開發頁面的時候,遇到很多的列表都需要用到箭頭,可以直接用作背景鋪墊,純css也能實現,並且沒有相容性顧慮,不用css3,相比而言,比更好用。原理 乙個高寬相等的正方形,選取你所需要的某一邊,擷取之,就是乙個梯形,當高寬都為0,且其他邊為透明顏色時,乙個三角形就出來了 梯形 html arrow c...

純css寫出來的小彩虹

今天在codepen上看見乙個用純css寫出來的動畫,所以就自己敲了一下 源 鏈結 這段 表示居中 left 50 top 50 transform translate 50 50 vmin說明 相對於視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vmin 示例 h1 如果視口的寬...