【前端】input输入框输入文字加文字轮廓效果
两种方案
方案一
输入框文字轮廓DEMO1通过文字阴影实现
<!DOCTYPE html>
<html lang="en">
<head>
<title>输入框文字轮廓DEMO1通过文字阴影实现</title>
<meta charset="UTF-8">
<style>
input[type="text"].text-outline {
font-size: 50px; /* 调整字体大小以便更好地展示轮廓效果 */
color: white; /* 文字颜色 */
text-shadow:
0 0 1px black,
0 0 2px black,
0 0 3px black;
}
</style>
</head>
<body>
<input type="text" class="text-outline" value="示例文本">
</body>
</html>方案二
输入框文字轮廓DEMO2只支持Webkit内核的
<!DOCTYPE html>
<html lang="en">
<head>
<title>输入框文字轮廓DEMO2只支持Webkit内核的</title>
<meta charset="UTF-8">
<style>
input[type="text"].text-stroke {
-webkit-text-stroke: 1px black;
color: white;
}
</style>
</head>
<body>
<input type="text" style="font-size: 70px;" class="text-stroke" value="示例文本">
</body>
</html>
