CSS3图片处理技巧大全
面向编程小白的CSS3图片处理详细指南 – 通过实例学习，直观易懂
border-radius 属性可以让图片变成圆角或圆形。数值越大，圆角越明显。设置为50%时，图片会变成完美的圆形。
img {
border-radius: 15px;
}
/* 圆形图片 */
img.circle {
border-radius: 50%;
}
filter 属性可以对图片应用各种视觉效果，如灰度、模糊、亮度调整等。就像在手机上使用滤镜一样简单！
img.grayscale {
filter: grayscale(100%);
}
/* 模糊效果 */
img.blur {
filter: blur(3px);
}
/* 亮度调整 */
img.bright {
filter: brightness(150%);
}
transform 属性可以旋转、缩放、倾斜或移动图片。让你的图片动起来，增加页面活力！
img.rotate {
transform: rotate(15deg);
}
/* 缩放图片 */
img.scale {
transform: scale(1.2); /* 放大20% */
}
/* 组合变换 */
img.combo {
transform: rotate(-10deg) scale(0.9);
}
box-shadow 属性可以为图片添加阴影效果，增加立体感。四个参数分别表示：水平偏移、垂直偏移、模糊半径和颜色。
img.shadow {
box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}
/* 内阴影 */
img.inset {
box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}
/* 多重阴影 */
img.multi {
box-shadow:
0 0 10px #3498db,
0 0 20px #2ecc71;
}
CSS3 可以为图片添加渐变边框，甚至使用图片作为边框。让你的图片拥有更丰富的边框样式。
img.border {
border: 10px solid #3498db;
border-radius: 10px;
}
/* 渐变边框 */
img.gradient-border {
border: 10px solid transparent;
border-image: linear-gradient(45deg, #3498db, #2ecc71) 1;
}
clip-path 属性可以将图片裁剪成各种形状（圆形、多边形等）。不需要Photoshop也能裁剪图片！
img.circle-clip {
clip-path: circle(50% at center);
}
/* 多边形裁剪 */
img.polygon {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
/* 自定义形状裁剪 */
img.custom-shape {
clip-path: path(‘M10,10 H90 V90 H10 Z’);
}
多个滤镜效果可以组合使用，创建更复杂的效果。就像在手机上叠加多个滤镜一样简单！
img.multi-filter {
filter:
grayscale(50%)
blur(1px)
brightness(120%)
contrast(110%)
sepia(30%);
}
/* 悬停时移除效果 */
img.multi-filter:hover {
filter: none;
}
使用 object-fit 属性可以让图片在不同屏幕尺寸下自适应容器，保持比例不失真。
img.responsive {
width: 100%;
height: 300px;
object-fit: cover;
}
/* 其他可选值 */
img.contain {
object-fit: contain; /* 完整显示图片 */
}
img.fill {
object-fit: fill; /* 拉伸填满容器 */
}