文本装饰与转换效果

文本装饰与转换效果

CSS提供了丰富的文本装饰与转换功能，让开发者能够精细控制文本的视觉呈现。从简单的下划线到复杂的3D变换，这些特性为网页排版增添了更多可能性。

基础文本装饰

text-decoration属性是最基础的文本装饰方式，它支持多种组合：

.underline {
  text-decoration: underline;
}

.overline {
  text-decoration: overline;
}

.line-through {
  text-decoration: line-through;
}

.combined {
  text-decoration: underline overline wavy red;
}

现代CSS还允许单独控制装饰线的各个特性：

.custom-decoration {
  text-decoration-line: underline;
  text-decoration-color: #ff5722;
  text-decoration-style: dotted;
  text-decoration-thickness: 3px;
}

文本阴影效果

text-shadow属性可以创建各种阴影效果，从简单的投影到霓虹灯效果：

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

.neon-effect {
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6;
}

.multiple-shadows {
  text-shadow: 
    1px 1px 1px #919191,
    1px 2px 1px #919191,
    1px 3px 1px #919191;
}

文本转换与变形

text-transform属性可以改变文本的大小写形式：

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

更复杂的变形可以使用transform属性：

.rotate-text {
  display: inline-block;
  transform: rotate(15deg);
}

.skew-text {
  transform: skewX(20deg);
}

.scale-text {
  transform: scale(1.5);
}

高级文本效果

CSS还支持一些高级文本效果，如渐变文字：

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

3D文本效果可以通过多层阴影实现：

.three-d-text {
  color: #f8f8f8;
  text-shadow: 
    0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.25);
}

文字描边效果

-webkit-text-stroke可以为文字添加描边：

.stroked-text {
  -webkit-text-stroke: 2px #333;
  color: white;
}

.stroked-gradient {
  -webkit-text-stroke: 2px transparent;
  background: linear-gradient(45deg, #ff0, #f0f);
  -webkit-background-clip: text;
  background-clip: text;
}

文字背景特效

文字可以与背景图像结合创造独特效果：

.image-text {
  background: url('texture.jpg') center/cover;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.animated-bg-text {
  background: linear-gradient(90deg, #000, #fff, #000);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 3s linear infinite;
}

@keyframes shine {
  to { background-position: 200% center; }
}

文字混合模式

mix-blend-mode可以实现文字与背景的混合效果：

.blend-text {
  background: url('background.jpg');
  color: white;
  mix-blend-mode: difference;
}

.container {
  background: linear-gradient(45deg, #ff0, #f0f);
  padding: 2rem;
}

.blend-inside {
  color: black;
  mix-blend-mode: screen;
}

文字裁剪与遮罩

CSS遮罩可以创建复杂的文字显示效果：

.masked-text {
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

.clip-text {
  background: url('pattern.png');
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 50px 50px;
}

响应式文字效果

使用CSS变量和视口单位可以创建响应式文字效果：

.responsive-text {
  --min-size: 16px;
  --max-size: 24px;
  font-size: clamp(var(--min-size), 4vw, var(--max-size));
  
  --min-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  --max-shadow: 3px 3px 6px rgba(0,0,0,0.5);
  text-shadow: var(--min-shadow);
}

@media (min-width: 768px) {
  .responsive-text {
    text-shadow: var(--max-shadow);
  }
}

文字动画效果

CSS动画可以为文字添加生动的效果：

.bouncing-text {
  display: inline-block;
  animation: bounce 0.8s infinite alternate;
}

@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-20px); }
}

.typing-effect {
  width: 22ch;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  animation: typing 2s steps(22), blink 0.5s step-end infinite alternate;
}

@keyframes typing {
  from { width: 0 }
}

@keyframes blink {
  50% { border-color: transparent }
}

可变字体特性

可变字体提供了更精细的文本控制：

.variable-font {
  font-family: 'Inter var', sans-serif;
  font-variation-settings: 'wght' 700, 'slnt' -10;
  transition: font-variation-settings 0.3s ease;
}

.variable-font:hover {
  font-variation-settings: 'wght' 900, 'slnt' 0;
}