CSS圖片屬性修改詳解

在CSS中，我們可以使用多種屬性來修改圖片的外觀和樣式，以下是一些常用的CSS圖片屬性及其修改方法：

1、寬度和高度：

可以使用width和height屬性來調(diào)整圖片的寬度和高度，將圖片的寬度設(shè)置為200像素，高度設(shè)置為300像素：

```css

img {

width: 200px;

height: 300px;

}

```

2、邊框：

可以使用border屬性來添加圖片的邊框，添加寬度為2像素的藍(lán)色邊框：

```css

img {

border: 2px solid blue;

}

```

3、圓角：

可以使用border-radius屬性來添加圖片的圓角效果，添加半徑為10像素的圓角：

```css

img {

border-radius: 10px;

}

```

4、背景：

可以使用background屬性來設(shè)置圖片的背景，設(shè)置背景顏色為黑色：

```css

img {

background: black;

}

```

5、透明度：

可以使用opacity屬性來調(diào)整圖片的透明度，將透明度設(shè)置為0.5：

```css

img {

opacity: 0.5;

}

```

6、變換：

可以使用transform屬性來對圖片進(jìn)行變換操作，如旋轉(zhuǎn)、縮放等，將圖片旋轉(zhuǎn)45度：

```css

img {

transform: rotate(45deg);

}

```

7、過渡：

可以使用transition屬性來添加圖片過渡效果，設(shè)置過渡效果為淡入淡出：

```css

img {

transition: opacity 1s ease-in-out;

}

```

8、動畫：

可以使用animation屬性來添加圖片動畫效果，設(shè)置動畫為上下移動：

```css

@keyframes moveUpAndDown {

0% { transform: translateY(0); }

50% { transform: translateY(-20px); }

100% { transform: translateY(0); }

}

img {

animation: moveUpAndDown 1s infinite;

}

```