跳到主要内容

文本排版与文本效果

文本如何水平对齐？​

  • 属性: text-align;
  • 取值: start/end、left/right、center、justify;
.example {
  text-align: center;
  text-align: justify;
}

行间距如何设置？​

  • 属性: line-height;
  • 取值: normal、无单位倍数 (1.2)、长度;
div {
  line-height: 1.2;
}

字母间距与单词间距如何设置？​

  • 字母间距: letter-spacing;
  • 单词间距: word-spacing;
  • 默认值: 均为 normal;
.normal {
  letter-spacing: normal;
  word-spacing: 1.2px;
}

如何转换文本大小写？​

  • 属性: text-transform;
  • 取值: none、capitalize、uppercase、lowercase、full-width;
span {
  text-transform: uppercase;
}

文本阴影如何书写？​

  • 属性: text-shadow;
  • 语法: offset-x | offset-y | blur-radius | color;
  • 叠加: 逗号分隔多条阴影;
.red-text-shadow {
  text-shadow: 1px 2px 2px red;
  text-shadow:
    1px 1px 2px black,
    0 0 1em blue;
}