css 制作图片
使用CSS制作图片
CSS可以通过多种方式创建或修饰图片效果，以下是一些常见方法：
使用背景属性创建图片容器
通过设置background-image属性可以为元素添加背景图片：
.image-container {
width: 300px;
height: 200px;
background-image: url('image.jpg');
background-size: cover;
background-position: center;
}使用伪元素生成图形
通过::before或::after伪元素配合CSS绘制简单图形：
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #3498db;
}使用CSS渐变创建图像
线性渐变和径向渐变可以创建简单的图案效果：
.gradient-image {
width: 200px;
height: 200px;
background: linear-gradient(45deg, #ff0000, #0000ff);
}使用滤镜效果修改图片
CSS滤镜可以对现有图片进行效果处理：
.filtered-image {
filter: grayscale(50%) blur(2px);
}使用clip-path裁剪图片
通过裁剪路径创建特殊形状的图片显示：
.clipped-image {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}使用box-shadow创建简单图形
利用多重阴影可以绘制简单图案：
.shadow-art {
width: 50px;
height: 50px;
box-shadow:
60px 0px 0 0 #f00,
120px 0px 0 0 #0f0;
}使用CSS动画让图片动起来
为图片添加动画效果：
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.animated-image {
animation: rotate 2s linear infinite;
}
