圖片樣式CSS參考

一、基本的圖片樣式

在Web開發中，圖片是一個非常重要的元素，因為圖片可以大大豐富網頁的內容，吸引用戶的眼球。樣式可以用來為圖片添加不同的效果，使其更加引人注目。

下面是一些基本的圖片樣式：

/* 圖片設置為塊級元素 */
img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

/* 圖片居中 */
img {
  display: block;
  margin: 0 auto;
}

/* 圖片添加邊框 */
img {
  border: 1px solid #999;
}

/* 圖片圓角 */
img {
  border-radius: 5px;
}

/* 圖片設置為灰色 */
img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

二、圖片陰影效果

陰影效果可以讓圖片看起來更加逼真，給用戶帶來更好的體驗。

下面是幾種常見的圖片陰影效果：

/* 添加小的陰影 */
img {
  box-shadow: 1px 1px 5px #999;
}

/* 添加大的陰影 */
img {
  box-shadow: 3px 3px 10px #999;
}

/* 投影向上 */
img {
  box-shadow: 0px -5px 10px #999;
}

/* 投影向下 */
img {
  box-shadow: 0px 5px 10px #999;
}

三、圖片濾鏡效果

濾鏡效果可以為圖片添加不同的顏色和亮度，使其更加鮮明。

下面是幾種常見的圖片濾鏡效果：

/* 圖片變暗 */
img {
  -webkit-filter: brightness(0.5);
  filter: brightness(0.5);
}

/* 圖片變亮 */
img {
  -webkit-filter: brightness(1.5);
  filter: brightness(1.5);
}

/* 圖片灰色 */
img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

/* 圖片反轉 */
img {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

/* 圖片模糊 */
img {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

四、圖片動畫效果

動畫效果可以為圖片添加更多的生動感，讓用戶在瀏覽頁面時更加愉快。

下面是幾種常見的圖片動畫效果：

/* 圖片懸停效果 */
img:hover {
  box-shadow: 1px 1px 5px #999;
  transform: scale(1.1);
}

/* 圖片抖動效果 */
@-webkit-keyframes shake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  10% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  20% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  30% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  40% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  50% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  60% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  70% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  80% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  90% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

img:hover {
  animation: shake 0.5s;
}

/* 圖片旋轉效果 */
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

img:hover {
  animation: rotate 2s linear infinite;
}