<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>蚀刻文本 + 渐变文本 + 细线边框</title>
<style>
/* 蚀刻文本 */
.shadow {
color: #b8bec5;
font-weight: bold;
font-size: 1.5rem;
text-shadow: 0 2px white;
}
/* 渐变文本 */
.grid {
font-size: 1rem;
background: -webkit-linear-gradient(pink, red);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
/* 细线边框 */
.box {
box-shadow: 0 0 0 1px;
}
@media (min-resolution: 2dppx) {
.box {
box-shadow: 0 0 0 0.5px;
}
}
@media (min-resolution: 3dppx) {
.box {
box-shadow: 0 0 0 0.333333333px;
}
}
@media (min-resolution: 4dppx) {
.box {
box-shadow: 0 0 0 0.25px;
}
}
</style>
</head>
<body>
<p class="shadow">
蚀刻文本:
text-shadow: 0 2px white 创建白色阴影偏移0px 水平和2px 垂直于原点位置。
背景必须比阴影暗，效果才能发挥作用。
文字颜色应该稍微褪色，使其看起来像是刻在背景上的。
</p>
<p class="grid">
渐变文本:
background: -webkit-linear-gradient(...) 为文本元素提供渐变背景。
webkit-text-fill-color: transparent 使用透明颜色填充文本。
webkit-background-clip: text 用文本剪辑背景，用渐变背景作为颜色填充文本。
</p>
<div class="box">
box-shadow ，当仅使用扩展时，添加可以使用子像素*的伪边框。
使用@media (min-resolution: ...) 为了检查器件像素比(1dppx 等于96 DPI )，将box-shadow的分布设置为1 / dppx
</div>
</body>
</html>
网友评论