当前位置：首页 > CSS

CSS制作文字

2026-01-28 19:08:49CSS

使用CSS制作文字效果

CSS提供了多种方式来美化文字，包括字体样式、颜色、阴影、渐变等。以下是几种常见的文字效果实现方法。

基本文字样式

设置字体、大小、颜色和粗细是最基础的文字样式调整。通过font-family、font-size、color和font-weight属性可以实现这些效果。

.text-basic {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #333;
  font-weight: bold;
}

文字阴影效果

text-shadow属性可以为文字添加阴影效果，增强立体感。阴影的偏移量、模糊半径和颜色均可自定义。

.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

渐变文字效果

通过背景渐变和-webkit-background-clip属性，可以实现文字填充渐变颜色的效果。需要配合-webkit-text-fill-color使用。

.text-gradient {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

文字描边效果

-webkit-text-stroke属性可以为文字添加描边，适用于需要突出显示的场景。可以设置描边的宽度和颜色。

.text-stroke {
  -webkit-text-stroke: 1px #000;
  color: #fff;
}

文字旋转和变形

使用transform属性可以对文字进行旋转、缩放或倾斜，创造出独特的视觉效果。

.text-transform {
  transform: rotate(15deg) scale(1.2);
}

多行文字截断

对于长文本，可以使用-webkit-line-clamp实现多行截断并显示省略号。需要配合display: -webkit-box和-webkit-box-orient: vertical使用。

.text-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

动画文字效果

通过CSS动画，可以让文字产生动态效果，如颜色变化、位置移动等。使用@keyframes定义动画，再通过animation属性应用。

.text-animation {
  animation: colorChange 2s infinite;
}

@keyframes colorChange {
  0% { color: red; }
  50% { color: blue; }
  100% { color: green; }
}