CSS中的文字美化与装饰(一)

477 阅读2分钟

这是我参与11月更文挑战的第19天,活动详情查看:2021最后一次更文挑战

text-shadow

text-shadow是文字阴影,不支持inset关键字,也就是text-shadow只有外阴影,没有内阴影,不支持阴影扩展,最多支持3个数值,分别表示水平偏移、垂直偏移和模糊大小。

// 右方、下方偏移2px,模糊3px
text-shadow: 2px 2px 3px red;

text-stroke

text-stroketext-fill-color分别用来实现文字描边效果和文字颜色填充效果。text-stroke属性是text-stroke-width和text-stroke-color两个css属性的缩写,分别表示文字描边的宽度和文字描边的颜色。无法指定文字描边的类型,只支持实线描边,不支持点线或者虚线描边,也无法指定描边是外描边还是内描边或居中描边。text-stroke属性的使用频率小于text-fill属性,因为text-stroke的文字描边效果是居中描边。

.wrapper {
    -webkit-text-stroke: 3px black;
}

text-stroke-width属性默认值为0,也支持medium关键字,当我们使用text-stroke属性的时候,是一定要设置描边的宽度值的。

text-fill-color属性可以对文字进行颜色填充,还可以覆盖color属性设置的颜色,只能覆盖color的渲染表现,实际上元素的颜色计算值还是由color属性决定的。

text-emphasis

text-emphasis属性对文字进行强调装饰,是text-emphasis-colortext-emphasis-style这两个css属性的缩写,text-emphasis不包括text-emphasis-position属性,text-emphasis-position是独立的。text-emphasis有4种属性,text-emphasis-color用来强调的字符颜色,初始值就是当前的文字颜色。text-emphasis-style接收值为none,也是默认值,表示乜有任何强调装饰。接收值为string表示使用任意单个字符作为强调装饰符。

text-emphasis: circle red;

text-emphasis-style内置有几个装饰符效果。分别为dot(点)、circle(圆)、double-circle(双层圆)、triangle(三角)、sesame(芝麻点)。每一种装饰符都有实心和空心两种类型。这两种类型由filledopen两个关键字决定的。

// 实心的圆点
text-emphasis: filled dot;
//等同于 text-emphasis: dot;
// 空心的圆点
text-emphasis: open dot;
//等同于text-emphasis: open;

text-emphasis-position属性用来指定强调装饰符的位置。默认位置在文字的上方,我们也可以指定强调装饰符在文字的下方,也可以指定文字竖向排版的时候强调装饰符是位于文字左侧还是文字右侧。初始值为over right。right定位用在文字竖向排版的时候。