CSS新增文本描边-text-stroke属性
CSS中的-webkit-text-stroke属性用于设置文本的描边粗细和颜色。该属性是非标准属性，主要用于WebKit内核的浏览器，如Chrome、Safari。
语法：
-webkit-text-stroke: <length> <color>;其中，<length>表示描边的宽度，<color>表示描边的颜色。
解决方案：
.stroke-text {
/* 设置文本描边为2px宽，颜色为红色 */
-webkit-text-stroke: 2px red;
/* 兼容性写法，为了其他内核的浏览器提供备选方案 */
text-shadow:
0 0 1px red, /* 水平方向 */
0 0 1px red, /* 垂直方向 */
0 0 1px red; /* 对角方向 */
}实例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.stroke-text {
-webkit-text-stroke: 1px black; /* Chrome, Safari */
text-shadow:
0 0 1px black, /* 水平方向 */
0 0 1px black, /* 垂直方向 */
0 0 1px black; /* 对角方向 */
font-size: 40px;
color: white;
}
</style>
</head>
<body>
<h1 class="stroke-text">描边文字</h1>
</body>
</html>在上述代码中，-webkit-text-stroke属性为文本设置了1像素宽的黑色描边，而为了提供其他浏览器兼容性，使用了text-shadow属性作为备选方案。在实际使用中，应该根据目标用户群的浏览器分布来决定是否需要添加备选的text-shadow样式。
评论已关闭