1.1css偽類
:not()：匹配不符合選擇器的元素
:first-child：選擇一組兄弟元素中的第乙個子元素
:last-child選擇一組兄弟元素中的最後乙個子元素
:hover：滑鼠懸浮在元素上方
:focus-within：匹配元素自身或者其某個後代匹配:focus偽類
1.2css屬性
transform：對當前元素進行旋轉、平移、傾斜及縮放操作，具體請自行檢視文件。
transition：為當前元素在不同狀態之間切換設定過渡效果，具體請自行檢視文件。
translatey：頁面垂直移動元素，具體請自行檢視文件。
translatex：頁面水平移動元素，具體請自行檢視文件。
1.3css選擇器
~：兄弟選擇符，位置無需相鄰，同級即可，例如：a~b表示選擇a元素後所有同級b元素
2.1 卡片行html實現
="cards"
>
="card"
>
"#">標題一<
/a>
<
/h2>
當前顯示為卡片一描述文字。<
/p>
<
/div>
="card"
>
"#">標題二<
/a>
<
/h2>
當前顯示為卡片二描述文字。<
/p>
<
/div>
="card"
>
"#">標題三<
/a>
<
/h2>
當前顯示為卡片三描述文字。<
/p>
<
/div>
="card"
>
"#">標題四<
/a>
<
/h2>
當前顯示為卡片四描述文字。<
/p>
<
/div>
="card"
>
"#">標題五<
/a>
<
/h2>
當前顯示為卡片五描述文字。<
/p>
<
/div>
<
/div>
.wrap
.cards
.card
.card h2
.card a
.card p
.card:not(:first-child)
.card:not(:last-child):hover,
.card:not(:first-child):focus-within
.card:not(:last-child):hover ~ .card,
.card:not(:first-child):focus-within ~ .card
純CSS實現波浪移動效果的示例
在某些頁面上常常看到波浪的效果，雖然只有裝飾的作用，但是卻讓頁面看上vuqvcr去更生動了，同時某些情況下也能起到進度條的作用，而波浪的形式卻比普通進度條更美觀有趣。如果想要實現波浪的效果，作者想到的第乙個方法是通過 canvas 繪製波浪，然後用幀動畫讓波浪運動起來。這種方式實現的波浪效果應該是最...
css畫橫線箭頭 如何用純CSS實現的箭頭的效果？
如何用純css實現的箭頭的效果？要點 用css即可繪製出各種箭頭，無需裁剪，甚至沒有用到css3的東西。對瀏覽器支援良好。基本原理 原理非常簡單，通過擷取border 邊框 的部分 拐角 實現，幾行css 即可理解 乙個梯形 當元素寬 高和邊框的寬相近 等 時，改變某一邊的顏色可以看到乙個梯形 de...
純css 如何實現文字超出部分橫向滾動
君不見黃河之水天上來，奔流到海不復回，君不見高堂明鏡悲白髮，朝如青絲暮成雪，人生得意須盡歡，莫使金樽空對月 下面解釋原因 首先 這裡的.box被設定了寬度為300px,而由於是塊級元素，所以預設寬度是100 在這裡也就是300px，但是的文字寬度其實是超過300px的，題主設定transform t...