【技巧】文字描边的三种方法
时间：2023-03-30 18:49:38
CSS
本文参考了张新旭的两篇博文：paint-orderwebkit-text-strokewebkit-text-strokeTextstroke描边效果：centeredstrokephenomenon:text-stroke-width会弱化文本的粗细，导致更细的文本-webkit-text-stroke:2pxred;//等效-webkit-text-stroke-width:2px;-webkit-text-stroke-color：红色；完美的描边效果使用-webkit-text-stroke可以模拟描边文字和非描边文字相互重叠。技巧是-webkit-text-stroke笔划文本的笔划宽度是要达到的外笔划效果宽度的两倍。我是苗冰的小哇
我是苗冰的小哇 //css.texts{position:relative;}.text1{font-size:40px;位置：绝对；z-指数：2；font-weight:bold;}.text2{font-size:40px;权重：粗体；-webkit-text-stroke:green6px;position:absolute;}text-stroke属性不能连续添加。如果要实现多笔划效果，可以使用伪元素模拟多层叠加。text-shadow.strok-outside{text-shadow:01pxred,1px0red,-1px0red,0-1pxred;}由于text-shadow不支持阴影扩展（box-shadow支持），我们使用四-way阴影覆盖实现。如图，当文字很大时，会出现齿轮问题。svgCSSpaint-order作用于SVG图形元素，设置是先绘制描边还是先绘制填充。在SVG中，同时设置描边和填充是很常见的，SVG图形的描边和-webkit-text-stroke一样，都是居中描边。svg{背景颜色：deepskyblue;填充：深红色；描边：白色；描边宽度：6px；字体大小：40px；font-weight:bold;}.paint-order{paint-order:stroke;
我是考试霸王我是考试霸王//`||`意味着或可以共存paint-order:normal|[填写||行程||markers]paint-顺序：标记笔划；正常：默认值。绘图顺序是填充笔划标记。图形绘制是last-on-top，所以默认是描边覆盖填充，标记覆盖描边。填：先填。描边：先描边，再填充或标记。标记：首先标记。下图中坐标值的两个箭头和折线上的红点是标记。元素绘制的CSSpaint-order可以应用于以下SVG元素：、、、、、、、<文本>、<文本路径>、~~~~和。paint-order也可以直接用作上述元素的XML属性。兼容性也不错
