制作图片css
使用 CSS 制作图片效果
通过 CSS 可以为图片添加多种视觉效果，包括边框、阴影、滤镜、圆角等。以下是一些常见的 CSS 图片效果实现方法。
添加圆角效果
使用 border-radius 属性可以为图片添加圆角。数值越大，圆角越明显。
img {
border-radius: 10px;
}如果需要圆形图片，可以将 border-radius 设为 50%。
img {
border-radius: 50%;
}添加阴影效果
使用 box-shadow 属性可以为图片添加阴影效果。
img {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}参数依次为水平偏移、垂直偏移、模糊半径和颜色。
添加滤镜效果
CSS 的 filter 属性可以为图片添加多种滤镜效果，如灰度、模糊、亮度调整等。
img {
filter: grayscale(50%);
}其他常用滤镜：
blur(5px)：模糊效果brightness(150%)：亮度调整contrast(200%)：对比度调整
添加悬停效果
通过 :hover 伪类可以为图片添加交互效果。
img:hover {
transform: scale(1.1);
transition: transform 0.3s ease;
}这段代码会在鼠标悬停时放大图片，并添加平滑过渡效果。
响应式图片
确保图片在不同设备上都能正确显示，可以使用以下 CSS：
img {
max-width: 100%;
height: auto;
}这会让图片在容器内自动调整大小，同时保持宽高比。
图片遮罩效果
使用 object-fit 可以控制图片在容器内的显示方式。
.container {
width: 300px;
height: 200px;
overflow: hidden;
}
.container img {
width: 100%;
height: 100%;
object-fit: cover;
}object-fit: cover 会让图片填充整个容器，可能会裁剪部分内容。
图片黑白效果
通过 CSS 可以轻松实现图片的黑白效果。
img.desaturate {
filter: grayscale(100%);
}将 grayscale 设为 100% 即可完全去除颜色。
图片边框效果
为图片添加艺术边框可以通过 border 和 padding 实现。
img.framed {
border: 10px solid #f0f0f0;
padding: 5px;
background: white;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}图片旋转效果
使用 transform 属性可以旋转图片。
img.rotate {
transform: rotate(15deg);
}负值会反向旋转图片。
图片透明度调整
通过 opacity 属性可以调整图片透明度。
img.transparent {
opacity: 0.7;
}值为 1 表示完全不透明，0 表示完全透明。
