CSS3 图片
CSS3 提供了多种强大的方式来处理和美化图片，以下是主要的 CSS3 图片相关技术：
原图
grayscale(100%)
blur(3px)
brightness(150%)
contrast(200%)
sepia(100%)
hue-rotate(90deg)
saturate(200%)
invert(100%)
opacity(50%)
CSS3 圆角效果 (border-radius)
CSS3 的border-radius属性，可以为图片设置圆角显示效果。
.example {
border-radius: 10px; /* 轻微圆角 */
border-radius: 50%; /* 椭圆形效果 */
}实现的效果：
CSS3 阴影效果 (box-shadow)
CSS3 的box-shadow属性，可以为图片设置阴影效果。
.example {
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
/* 水平偏移 垂直偏移 模糊半径 颜色 */
}实现的效果：
CSS3 滤镜效果 (filter)
CSS3 的filter属性，可以为图片设置阴影效果。
.example {
filter: grayscale(50%); /* 灰度效果 */
filter: sepia(100%) /* 怀旧效果 */
filter: saturate(200%) /* 饱和度 */
filter: hue-rotate(90deg) /* 色相旋转 */
}实现的效果：
CSS3 过渡效果 (transition)
CSS3 的filter属性，可以为图片设置过渡效果。
img {
transition: all 0.3s ease;
}
img:hover {
transform: scale(1.05);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}实现的效果：
CSS3 变形效果 (transform)
CSS3 的transform属性，可以为图片设置变形效果。
.example {
transform: rotate(5deg); /* 旋转 */
transform: scale(1.2); /* 缩放 */
transform: skew(10deg); /* 倾斜 */
transform: translate(10px, 20px); /* 移动 */
}实现的效果：
CSS3 遮罩效果 (mask)
CSS3 的mask属性，可以为图片设置遮罩效果。
.example {
-webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}实现的效果：
CSS3 图片处理技术
| CSS属性 | 功能描述 |
|---|---|
| border-radius | 定义元素边框的圆角半径，可创建圆形或椭圆形的图片显示效果。 |
| box-shadow | 为图片添加多层次阴影效果，支持设置阴影的偏移、模糊、扩散和颜色等参数。 |
| filter | 提供多种图像滤镜效果，包括：模糊(blur)、亮度调节(brightness)、对比度调节(contrast)、投影效果(drop-shadow)、灰度转换(grayscale)、色相旋转(hue-rotate)、颜色反相(invert)、透明度调节(opacity)、饱和度调节(saturate)以及深褐色复古效果(sepia)。 |
| transition | 实现图片属性变化的平滑过渡效果，可自定义过渡时间、延迟和速度曲线。 |
| transform | 支持对图片进行旋转(rotate)、缩放(scale)、倾斜(skew)、位移(translate)等2D/3D变形操作。 |
| mask-image | 使用图像或渐变作为遮罩层，控制图片的显示区域，创建各种形状的裁剪效果。 |
评论区 0
发表评论
教程介绍
CSS3 是 CSS 技术的版本升级，在 CSS 基础上进行了扩展改进，引入了新的特性和模块。
36
章节
70
阅读
0
评论
反馈提交成功
感谢您的反馈，我们将尽快处理您的反馈