<h1 class="highlighted-text-shadow">
CSS<br>
文字<br>
阴影<br>
顶部高光
</h1>
<small>文本顶部使用大概 2px 的白色高光使它看起来好像有一个光源。</small>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
@layer demo {
.highlighted-text-shadow {
text-shadow:
/* 常规阴影 */
0 .15ch 15px var(--shadow),
/* 顶部高光 */
0 -2px 0 var(--highlight);
}
}
@layer demo.support {
:root {
--hue: 350; /* 更新以切换不同颜色 */
--bg: oklch(35% .3 var(--hue));
--text: oklch(85% .1 var(--hue));
--shadow: oklch(25% .2 var(--hue));
--highlight: oklch(98% .05 var(--hue));
}
* {
box-sizing: border-box;
margin: 0;
}
html {
block-size: 100%;
background-color: var(--bg);
color: var(--text);
}
body {
min-block-size: 100%;
font-family: system-ui, sans-serif;
display: grid;
place-content: center;
gap: 10vh;
}
h1 {
font-size: 15vi;
letter-spacing: -.15ch;
line-height: .95;
}
small {
max-inline-size: 20ch;
}
}