css文字效果（凸版印刷，发光，3D）

css文字效果

一、凸版印刷效果

出现在底部的浅色投影（或者出现在顶部的暗色投影）会让人产生物体是凹进平面内的错觉。同理，出现在底部的暗色投影(或者出现在顶部的浅色投影）会让人产生物体从平面上凸起的错觉。这种方法之所以奏效，是因为我们在现实世界中早已习惯了光源总是悬在头顶。在这样的环境里，凸起物的下方会产生阴影，而凹陷的底部边缘则会被打亮。

<style>
    div {
        width: 100px;
        font-size: 12px;
        padding: 5px;
        box-sizing: border-box;
    }

    .box {
        background: hsl(210, 13%, 60%);
        color: hsl(210, 13%, 30%);
        text-shadow: 0 1px 1px hsla(0, 0%, 100%, .8);
    }

    .box1 {
        background: hsl(210, 13%, 40%);
        color: hsl(210, 13%, 75%);
        text-shadow: 0 1px 1px black;
    }
</style>
<main>
    <!-- 浅色背景 -->
    <div class="box">the only way to get rid of a temptation is to yield to it</div>

    <!-- 深色背景 -->
    <!-- 深色背景的情况下给文字顶部加深色投影是最佳方案 -->
    <div class="box1">the only way to get rid of a temptation is to yield to it</div>

</main>

二、文字发光效果

<style>
    div {
        padding: 5px;
    }

    .box {
        background: #203;
        color: #ffc;
        text-shadow: 0 0 .1em, 0 0 .3em;
    }
</style>
<main>
    <div class="box">css</div>
        
</main>

三、文字3D凸起效果

<style>
    div {
        padding: 5px;

    }
    .retro {
        color: white;
        width: 100px;
        height: 40px;
        font-size: 24px;
        background: hsl(0, 50%, 45%);
        text-shadow:
            1px 1px black, 2px 2px black,
            3px 3px black, 4px 4px black,
            5px 5px black, 6px 6px black,
            7px 7px black, 8px 8px black
    }
</style>
<main>
    <div class="retro">Retro</div>
</main>

使用scss可以这样写

<style lang="scss">
@function text-retro($color: black, $depth: 8) {
    $shadows: (1px 1px $color,);
    @for $i from 2 through $depth {
        $shadows: append($shadows, ($i * 1px) ($i * 1px) $color, comma);
    }
    @return $shadows;
}

.retro {
  color: white;
  width: 100px;
  height: 40px;
  background: hsl(0, 50%, 45%);
  text-shadow: text-retro();
  font-size: 24px;
}
</style>