css - 我将如何实现不会通过透明文本显示的阴影?
问题描述
如果没有图像/路径,我将如何实现这种外观?
我需要带有粗边框的文本,以及不会通过透明文本显示的阴影。
我已经尝试过 normal text-shadow
,但它没有按我需要的方式工作。
我尝试使用SVG
,但它没有提供我需要的灵活性,对于图像也是如此。
解决方案
* {
box-sizing: border-box;
font-family: inherit;
}
html {
font-size: 62.25%;
}
body {
font-family: sans-serif;
font-size: 1.6rem;
background: linear-gradient(to right, rgb(0, 128, 111), rgb(199, 189, 57));
}
h1 {
background: transparent;
color: transparent;
font-family: sans-serif;
font-size: 50px;
font-weight: bold;
text-shadow: 3px 3px 0 rgb(54, 54, 54);
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: rgb(0, 0, 0);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
}
<h1>Hello World</h1>
推荐阅读
- shell - 如何在谷歌驱动器中创建一个文件夹,在 shell 中使用 curl
- python-3.x - 从标签元素获取文本
- linux - 有没有办法“逃避”linux命令?
- javascript - 如何设置一个元素,使其使用父元素的剩余高度,而其上还有其他 2 个动态元素?
- c++ - 具有依赖类型的非静态数据成员的非限定名称是否依赖
- spring-boot - Spring Data JPA - findBy 映射对象
- python - 为每个唯一 ID 创建一个图
- git - 如何在拉取请求批准时解决 Azure 环境中的冲突
- python - 循环一个函数
- javascript - 如果 Map 中的键是数组,如何获取键的值?