经过思考梳理了以下三个方案,方案1无疑是最好的,但既然有了方案2和方案3的设想,便姑且也尝试写出来试试效果。
方案一 -webkit-text-stroke,color 或 -webkit-text-fill-color
1)用 -webkit-text-stroke(文字描边) 设置文字描边的粗细和颜色;
2)用 color 将文字颜色设置为透明,或者用 -webkit-text-fill-color 将文字填充为透明色。
<div class="embossed-1">Hello World</div>
<div class="embossed-2">Hello World</div>
<style>
.embossed-1 {
font-size: 24px; font-weight: bolder; background: red;
-webkit-text-stroke: 1px #333;
-webkit-text-fill-color: transparent;
}
.embossed-2 {
font-size: 24px; font-weight: bolder; background: yellow;
-webkit-text-stroke: 1px #333;
color: transparent;
}
</style>
方案二 text-shadow,mix-blend-mode
1)用 text-shadow 给文字添加阴影,但是因为它没有提供属性来修改阴影的延伸半径(类似box-shadow的第四个参数),所以描边效果不够锋锐;
2)将字体颜色设置为白色,之所以不随方案一设置为透明色,是因为那么做的话,显示出的是文字下方的文字阴影,而非元素下方的东西;
3)用 mix-blend-mode 将文字颜色与下方背景图像进行混合,上一步文字设置的是白色,那么这里混合方式就选darken,这样经过混合计算后显示的就是下方的背景。
<div class="embossed-1">Hello World</div>
<div class="embossed-2">Hello World</div>
<div class="embossed-3"><div class="text">Hello World</div></div>
<style>
.embossed-1 {
font-size: 24px; color: #fff;
text-shadow: 0 0 3px #000; /* 设置阴影 */
}
.embossed-2 {
font-size: 24px; color: #fff; background:red;
text-shadow: 0 0 3px #000; /* 设置阴影 */
}
.embossed-3 {
font-size: 24px; color: #fff; background:yellow;
text-shadow: 0 0 3px #000; /* 设置阴影 */
}
.embossed-3 .text{mix-blend-mode:darken;}
</style>
方案三 :after,transform
1)首先将文本的每个文字都放到一个单独元素中,并用该元素的:after伪元素进行一定的缩放,然后放置到原文字的上方,遮盖住原文字的身体,只漏出所有笔画的边缘部分;
2):after伪元素的颜色要与文本下方的背景保持一致。
<div class="embossed-1">
<div class="item" data-text="H">H</div>
<div class="item" data-text="e">e</div>
<div class="item" data-text="l">l</div>
<div class="item" data-text="l">l</div>
<div class="item" data-text="o">o</div>
<div class="item" data-text=""></div>
<div class="item" data-text="W">W</div>
<div class="item" data-text="o">o</div>
<div class="item" data-text="r">r</div>
<div class="item" data-text="l">l</div>
<div class="item" data-text="d">d</div>
</div>
<style>
.embossed-1 {
font-size: 24px; font-weight: bolder; color: #fff; background:red;
display: flex;
}
.embossed-1 .item {
display: flex; justify-content: center; align-items:center;
position: relative;
}
.embossed-1 .item:after {
content: attr(data-text);
display: flex; justify-content: center; align-items:center;
position: absolute; left: 0; top: 0; width: 100%; height: 100%;
font-weight: normal; color: red; transform:scale(.936);
}
</style>