CSS文本阴影实例

原文

　　简书原文：https://www.jianshu.com/p/5abf2fa2f1b9

前言

　　以下的实例是我从《CSS实战》中看到的实例，当我看到这些实例的时候，发现平时不是很在意的一些知识能够有这样的神奇的运用，在次分享给各位的读者，希望读者也能和我一样有所收获。

html文本

<p>Text Shadow</p>

不同方向的投影

<!--
    右上角投影
-->
p{
    text-align:center;
    margin:0;
    font-family:helvetica,arial,sans-serif;
    color:#999;
    font-size:80px;
    font-weight:bold;
    text-shadow:0.1em -0.1em #333;
}
<!--
    右下角投影
-->
p{
    text-align:center;
    margin:0;
    font-family:helvetica,arial,sans-serif;
    color:#999;
    font-size:80px;
    font-weight:bold;
    text-shadow:0.1em 0.1em #333;
}

<!--
    左上角投影
-->
p{
    text-align:center;
    margin:0;
    font-family:helvetica,arial,sans-serif;
    color:#999;
    font-size:80px;
    font-weight:bold;
    text-shadow:-0.1em -0.1em #333;
}

<!--
    左下角投影
-->
p{
    text-align:center;
    margin:0;
    font-family:helvetica,arial,sans-serif;
    color:#999;
    font-size:80px;
    font-weight:bold;
    text-shadow:-0.1em 0.1em #333;
}

投影的不同用法

<!--
    通过阴影增加前景色与背景色的对比度
-->
p{
    text-align:center;
    margin:0;
    font-family:helvetica,arial,sans-serif;
    color:#999;
    font-size:80px;
    font-weight:bold;
    text-shadow:0.1em 0.1em 0.3em #333;
}

<!--
    模糊文本
-->
p{
    text-align:center;
    margin:0;
    font-family:helvetica,arial,sans-serif;
    color:#fff;
    font-size:80px;
    font-weight:bold;
    text-shadow:0.1em 0.1em 0.2em #000;
}

<!--
    为白色文本定义三个不同颜色的阴影，模拟复杂的文本特效
-->
p{
    text-align:center;
    margin:0;
    font-family:helvetica,arial,sans-serif;
    color:#fff;
    font-size:80px;
    font-weight:bold;
    text-shadow:0.2em 0.5em 0.1em #600,
                -0.3em 0.1em 0.1em #060,
                0.4em -0.3em 0.1em #006,;
}

<!--
    使用阴影叠加出的燃烧的文字特效
-->
p{
    text-align:center;
    padding:24px;
    margin:0;
    font-family:helvetica,arial,sans-serif;
    color:#000;
    background:#000;
    font-size:80px;
    font-weight:bold;
    text-shadow:0 0 4px #fff,
                0 -5px 4px #ff3,
                2px -10px 6px #fd3,
                -2px -15px 11px #f80
                2px -25px 18px #f20;
}

<!--
    使用阴影叠加出的立体文本特效
-->
p{
    text-align:center;
    padding:24px;
    margin:0;
    font-family:helvetica,arial,sans-serif;
    color:#D1D1D1;
    background:#CCC;
    font-size:80px;
    font-weight:bold;
    text-shadow:-1px -1px #fff,
                1px 1px #333;
<!--通过在文本的左上和右下各添加一个1px的错位补色阴影，可实现淡淡的立体效果-->
}

<!--
    使用阴影叠加出的凹文本特效
-->
p{
    text-align:center;
    padding:24px;
    margin:0;
    font-family:helvetica,arial,sans-serif;
    color:#D1D1D1;
    background:#CCC;
    font-size:80px;
    font-weight:bold;
    text-shadow:1px 1px #fff,
                -1px -1px #444;
<!--通过在文本的左上和右下各添加一个1px的错位补色阴影，可实现淡淡的凹文本效果-->
}

<!--
    使用阴影设计文本外发光特效
-->
p{
    text-align:center;
    padding:24px;
    margin:0;
    font-family:helvetica,arial,sans-serif;
    font-size:80px;
    font-weight:bold;
    text-shadow:0 0 0.2em #F87,
                0 0 0.2em #F87;<!--设计阴影不发生位移，同时定义阴影模糊显示-->
}