CSS3利用text-shadow属性实现多种效果的文字样式展现方法

2020-04-30 14:33:07易采站长站整理

        .p1{   
            text-shadow: 0.2em 0.5em 0.1em #600,-0.3em 0.1em 0.1em #060,0.4em -0.3em 0.1em #006;   
            color:red;   
        }   
        .p2{   
            background:black;   
            text-align:left;   
            text-shadow: 0 -5px 4px #FF3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;   
            color:red;   
        }   
        .p3{   
            text-shadow: -1px -1px white,1px 1px #333;   
            color:#D1D1D1;   
            font-weight: bold;   
            background: #CCC;   
        }   
        .p4{   
            text-shadow: 1px 1px white,-1px -1px #333;   
            color:#D1D1D1;   
            font-weight: bold;   
            background: #CCC;   
        }   
        .p5{   
            text-shadow: -1px 0 black,0 1px black,1px 0 black,0 -1px black;   
            color:#ffffff;   
            background: #CCC;   
        }   
        .p6{   
            text-shadow: 0 0 0.2em #F87,0 0 0.2em #f87;