css涂色制作

CSS涂色基础方法

使用CSS为元素添加颜色主要通过color（文字颜色）和background-color（背景颜色）属性实现。颜色值可以是预定义名称、十六进制码、RGB/RGBA或HSL/HSLA格式：

.text-color {
  color: #FF5733; /* 十六进制 */
}

.bg-color {
  background-color: rgba(255, 87, 51, 0.7); /* 带透明度的RGB */
}

渐变背景涂色

CSS线性渐变和径向渐变可创建复杂色彩效果：

.gradient-bg {
  background: linear-gradient(45deg, #FFC300, #FF5733, #C70039);
}

.radial-bg {
  background: radial-gradient(circle, #5B2C6F, #1B4F72);
}

边框与阴影涂色

通过border和box-shadow属性实现装饰性涂色：

.colored-border {
  border: 3px dashed #3498DB;
  box-shadow: 0 0 10px #F39C12;
}

动画涂色效果

使用@keyframes实现动态颜色变化：

@keyframes pulse {
  0% { background-color: #AED6F1; }
  50% { background-color: #5DADE2; }
  100% { background-color: #AED6F1; }
}

.animated-color {
  animation: pulse 3s infinite;
}

滤镜调色

CSS滤镜可对现有颜色进行后期处理：

.filtered-color {
  filter: hue-rotate(90deg) saturate(200%);
}

变量控制涂色

CSS变量便于统一管理颜色方案：

:root {
  --primary-color: #2ECC71;
  --secondary-color: #E74C3C;
}

.theme-element {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}