text-stroke 不是标准的 css 属性, 所以本篇读者可以视为娱乐
text-stroke 是复合属性, 包括 text-stroke-width, text-stroke-color
因为不是标准属性, 大多数情况要加上前缀
text-stroke-width 指描边的宽度, 该属性的描边风格是居住描边(内边, 外边各占一半), 且只有居中描边一种
结合 absolute 定位, 用未描边的内容, 遮盖已描边的内容, 可以实现只描外边的效果
demo
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>text-stroke 文字描边</title>
<style>
body {
font-family: "隶书";
font-size: 40px;
color: #fcc;
font-weight: bolder;
}
.font1 {
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #f00;
text-stroke-width: 2px;
text-stroke-color: #f00;
}
.font2 {
position: relative;
}
.font2 p {
position: absolute;
top: 0;
left: 0;
}
.font2 .stroke {
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #f00;
text-stroke-width: 2px;
text-stroke-color: #f00;
}
</style>
</head>
<body>
<div class="font1">
描了2像素的边, 内外各一半
</div>
<div class="font2">
<p class="stroke">描了1像素的边, 仅是外边</p>
<p>描了1像素的边, 仅是外边</p>
</div>
</body>
</html>
Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
参考资料:
-webkit-text-stroke-width - CSS: Cascading Style Sheets | MDN
//end