最新css樣式分享

分享一些最新的 CSS 樣式示例。這些樣式包括了一些新的 CSS 特性，例如過渡（transitions）、動畫（animations）、偽類（pseudo-classes）以及回響式設計（responsive design）。

以下是一些 CSS 樣式的示例：

1. 文字陰影（Text Shadow）

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

這個樣式會使標題文本具有陰影效果。

2. 過渡（Transition）

div {
  transition: background-color 0.5s ease;
}

這個樣式會使 div 的背景顏色在 0.5 秒內平滑過渡。

3. 動畫（Animation）

@keyframes myAnimation {
  0%   {background-color: red;}
  50%  {background-color: yellow;}
  100% {background-color: blue;}
}

這個樣式定義了一個名為 myAnimation 的動畫，它在動畫開始時將背景顏色設定為紅色，在中間變為黃色，最後變為藍色。

4. 回響式設計

為了創建回響式設計，可以使用媒體查詢（Media Queries）來改變樣式在不同的螢幕尺寸下。例如：

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

這個樣式在螢幕寬度小於或等於 600px 時，將背景顏色設定為淺藍色。

5. 偽類選擇器

偽類選擇器可用於選擇 HTML 元素的不同狀態，例如：hover、active、focus 等。例如：

a:hover {color: red;} /* 當滑鼠懸停在連結上時，連結的顏色變為紅色 */

這些只是一些基本的示例，CSS 的功能遠不止這些。還有很多新的 CSS 特性（如 CSS Grid、Flexbox 等）和庫（如 Bootstrap、Tailwind CSS 等）可以幫助你創建更複雜和回響式的網頁設計。