【文字书写、文本阴影】11

文字书写和文字阴影

1. 文本多列

文本多列：将文本内容设计成像报纸一样的多列布局，集合样式column

• column-width：指定列的宽度
• column-count：要分的列数
• column-gap：列之间的距离
• column-rule：栏目间隔线由(类似边框的复合样式width、color和style)

p{
    /* width: 800px; */
    border: 2px solid fuchsia;
    text-indent: 2em;
    column-count: 3;
    column-rule: 1px solid goldenrod;
    column-gap: 20px;
}

2. 文字书写方向

1. direction：实现控制文本的书写方向
   • 文本排列从左到右：ltr(默认值)
   • 文本排列从右到左：rtl
   • 需配合unicode-bidi(文本是否被重写)一块使用，默认值为normal(不重写)，设置为bidi-override(按照direction重写)
2. writing-mode：定义了文本在水平或垂直方向上如何排布。
   • 水平从左向右书写，垂直自上而下堆叠：horizontal-tb(默认值)
   • 垂直从上向下书写，水平自右而左堆叠：vertical-rl
   • 垂直从上向下书写，水平自左而右堆叠：vertical-lr
   • 垂直从上向下书写(文字的上在右边)，水平自右而左堆叠：sideways-rl
   • 垂直从上向下书写(文字的上在左边)，水平自左而右堆叠：sideways-lr
3. 中文对齐：text-align-last:规定如何对齐文本的最后一行。justify设置中文两端对齐

p{
    direction: ltr;
    text-align: justify;
}

3. 文字阴影

文字阴影：text-shadow:x y blur color,…

• x/y 横向偏移/纵向偏移
• blur 模糊距离
• color 阴影颜色

---