【CSS】常用特效字

拼搏现实的明天。 2022-09-11 13:21 216阅读 0赞

人生之路应该如何走？
 人生之路应该如何走？
 人生之路应该如何走？
 人生之路应该如何走？
 星星之火可以燎原
 文字凸起效果
 文字凹下效果
 定义描边文字
 文字外发光

.shadow {
         
        text-align: center;
        font: bold 60px helvetica, Arial, sans-serif;
        color: #999;
        text-shadow: 0.1em 0.1em 0.1em #3c3c3c; /*阴影水平偏移值，垂直偏移值，模糊值，颜色*/
    }
    
    .shadow2 {
         
        text-align: center;
        font: bold 60px helvetica, Arial, sans-serif;
        color: #fff;
        text-shadow: black 0.1em 0.1em 0.2em /*阴影水平偏移值，垂直偏移值，模糊值，颜色*/
    }
    
    .shadow3 {
         
        text-align: center;
        font: bold 60px helvetica, Arial, sans-serif;
        color: #fff;
        text-shadow: 0.2em 0.5em 0.1em #600,
        -0.3em 0.1em 0.1em #060,
        0.4em -0.3em 0.1em #006; /*阴影水平偏移值，垂直偏移值，模糊值，颜色*/
    }
    
    .shadow4 {
         
        text-align: center;
        font: bold 60px helvetica, Arial, sans-serif;
        color: red;
        border: solid 1px red;
        text-shadow: 0.5em 0.5em 0.1em #600,
        -1em 1em 0.1em #060,
        0.8em -0.8em 0.1em #006; /*阴影水平偏移值，垂直偏移值，模糊值，颜色*/
    }
    
    .shadow5 {
         
        text-align: center;
        font: bold 60px helvetica, Arial, sans-serif;
        color: red;
        text-shadow: 0 0 4px white,
        0 -5px 4px #ff3,
        2px -10px 6px #fd3,
        -2px -15px 11px #f80,
        2px -25px 18px #f20;
    }
    
    .shadow6 {
         
        text-align: center;
        padding: 24px;
        margin: 0;
        font: bold 80px helvetica, Arial, sans-serif;
        color: #D1D1D1;
        background: #ccc;
        text-shadow: -1px -1px white,
        1px 1px #333;
    }
    
    .shadow7 {
         
        text-align: center;
        padding: 24px;
        margin: 0;
        font: bold 80px helvetica, Arial, sans-serif;
        color: #D1D1D1;
        background: #ccc;
        text-shadow: 1px 1px white,
        -1px -1px #333;
    }
    
    .shadow8 {
         
        text-align: center;
        padding: 24px;
        margin: 0;
        font: bold 80px helvetica, Arial, sans-serif;
        color: #D1D1D1;
        background: #ccc;
        text-shadow: -1px 0 black,
        0 1px black, 1px 0 black, 0 -1px black;
    }
    .shadow9 {
         
        text-align: center;
        padding: 24px;
        margin: 0;
        font: bold 80px helvetica, Arial, sans-serif;
        color: #D1D1D1;
        background: #ccc;
        text-shadow: 0 0 0.2em #F87,0 0 0.2em #F87;

效果：

![103455a5dbfab8380a60d41679a8b38a.png][]

[103455a5dbfab8380a60d41679a8b38a.png]: /images/20220828/fe28fcf0f6ce4c9faa5c56b070a89a16.png