css涂色制作

CSS 涂色制作方法

使用 CSS 进行涂色可以通过多种方式实现，包括背景色、渐变色、边框色等。以下是几种常见的 CSS 涂色方法。

背景色填充
通过 background-color 属性为元素设置纯色背景。

div {
  background-color: #ff0000; /* 红色 */
}

渐变色填充
使用 linear-gradient 或 radial-gradient 创建渐变效果。

div {
  background: linear-gradient(to right, #ff0000, #0000ff); /* 红到蓝渐变 */
}

边框涂色
通过 border 属性为元素边框着色。

div {
  border: 2px solid #00ff00; /* 绿色边框 */
}

文本颜色
使用 color 属性改变文本颜色。

p {
  color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
}

阴影效果
通过 box-shadow 或 text-shadow 添加颜色阴影。

div {
  box-shadow: 5px 5px 10px #000000; /* 黑色阴影 */
}

SVG 涂色
结合 SVG 和 CSS 实现复杂涂色效果。

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="purple" />
</svg>

动画涂色
使用 @keyframes 实现颜色动态变化。

@keyframes colorChange {
  0% { background-color: red; }
  50% { background-color: blue; }
  100% { background-color: green; }
}
div {
  animation: colorChange 3s infinite;
}