java polygon描边_【技能】文字描边的三大方法

webkit-text-stroke文字描边

描边效果：居中描边

现象：text-stroke-width会削弱文字的字重，导致文字变细

-webkit-text-stroke: 2px red;

//等同

-webkit-text-stroke-width: 2px;

-webkit-text-stroke-color: red;

完美描边效果

可以使用-webkit-text-stroke描边文字和非描边文字相互重叠覆盖的方法模拟。技巧就在于-webkit-text-stroke描边文字的描边宽度要是要实现的外描边效果宽度的2倍。

我是苗冰的小哇啊

我是苗冰的小哇啊

//css

.texts {

position: relative;

}

.text1 {

font-size: 40px;

position: absolute;

z-index: 2;

font-weight: bold;

}

.text2 {

font-size: 40px;

font-weight: bold;

-webkit-text-stroke: green 6px;

position: absolute;

}

text-stroke属性不行不断累加，如果想要实现多重描边效果，可以借助伪元素多层叠加模拟。

text-shadow

.strok-outside {

text-shadow: 0 1px red, 1px 0 red, -1px 0 red, 0 -1px red;

}

由于text-shadow不支持阴影扩展(box-shadow支持)，因此，我们使用四向阴影叠加实现。

如图，当文字特别大的时候，会有齿轮问题。

svg

CSS paint-order作用在SVG图形元素上，设置是先绘制描边还是先绘制填充。

在SVG中，描边和填充同时都有设置是很常见的，而SVG图形的描边和-webkit-text-stroke是一样的，都是居中描边。

svg {

background-color:deepskyblue;

fill:crimson;

stroke:white;

stroke-width:6px;

font-size:40px;

font-weight:bold;

}

.paint-order {

paint-order:stroke;

}

我是测试小霸王

我是测试小霸王

//`||`表示或者，可以并存

paint-order: normal | [ fill || stroke || markers ]

paint-order: markers stroke;

normal:默认值。绘制顺序是fill stroke markers。图形绘制是后来居上的，因此默认是描边覆盖填充，标记覆盖描边。

fill:先填充。

stroke:先描边，然后再填充或者标记。

markers:先标记。下图坐标值的两个箭头，以及折线上的红色小圆点就是标记，元素绘制的

CSS paint-order可以作用在SVG的以下这些元素上：, , , , , , , , ,~~~~ 以及。

paint-order也可以直接作为XML属性用在上面这些元素上。

兼容性也是不错的