3.8 (案例) css3文本阴影效果

作者: 柒月柒日晴7 | 来源:发表于2017-06-07 23:21 被阅读0次

3.8 (案例) css3文本阴影效果
CSS3 基础（2）——文本效果和字体
web前端面试提问总结：
CSS进阶知识点--文本与字体（overflow 及获取特殊字体
CSS3文本与字体
4.2 字体+边框+背景笔记总结
CSS3 文本效果
web前端入门到实战：css3基础-文本与字体+转换+过渡+动画
box-shadow 效果大全
CSS3 文本效果+字体

css3文本阴影效果.png

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title> New Document </title>
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
    /*CSS reset*/
    html{color:#000;background:#FFF;}
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{padding:0;margin:0;}
    table{border-collapse:collapse;border-spacing:0;}
    fieldset,img{border:0;}
    address,caption,cite,code,dfn,em,strong,th,var, optgroup{font-style:inherit;font-weight:inherit;}
    del,ins,a{text-decoration:none;}
    li{list-style:none;}
    caption,th{text-align:left;}
    h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
    q:before,q:after{content:'';}
    abbr,acronym{border:0;font-variant:normal;}
    sup{vertical-align:baseline;}
    sub{vertical-align:baseline;}
    legend{color:#000;}
    input,button,textarea,select,optgroup,option{font-family:inherit; font-size:inherit;font-style:inherit;font-weight:inherit;}
    input,button,textarea,select{*font-size:100%;}
    /*CSS reset*/

    body{margin:0 auto;}
    p{margin:0 auto;padding:40px 0;text-align:center;height:50px;width:380px;font-size:44px;font-weight:bold;font-family:Britannic Bold;background:#d5d2c1;}

    .p1{background:#454545;color: #333; text-shadow: -1px -1px #ccc, 1px 1px #666;}
    .p2{background:#000;color:#fff;text-shadow:0px 0px 5px #f0f,0px 0px 10px rgba(255,0,255,0.8),0px 0px 20px rgba(255,0,255,0.8),0px 0px 35px rgba(255,0,255,0.8),0px 0px 55px rgba(255,0,255,0.8);}
    .p3{background:#ddd;color: #fff; 
        text-shadow: 
        0 1px 0 #ccc,
        0 2px 0 #c9c9c9,
        0 3px 0 #bbb,
        0 4px 0 #b9b9b9,
        0 5px 0 #aaa,
        0 6px 1px rgba(0,0,0,0.1),
        0 0 5px rgba(0,0,0,0.1),
        0 1px 3px rgba(0,0,0,0.3),
        0 3px 5px rgba(0,0,0,0.2),
        0 5px 10px rgba(0,0,0,0.25);
    }
    .p4{background:#eee;color: transparent; text-shadow: 0 0 8px #f36; }
    .p5{color: #ccc; text-shadow: -1px -1px #333, 1px 1px #fff;}
    .p6{background:#eee;color:#707070;/* -webkit-text-stroke: 1px #0f0;*/text-shadow: 0px -1px #00f, 0px 1px #00f, 1px 0px #00f, -1px 0px #00f; }
    .p7{-webkit-text-stroke: 1px #000;-webkit-text-fill-color: transparent;}
    .p8{background:#eee;color:rgba(255,0,0,0.8);
        text-shadow: 0 -3px 6px rgba(255,0,0,0.8),
        0 -6px 10px rgba(255,64,0,0.8),
        0 -10px 16px  rgba(255,127,0,0.8),
        0 -16px 24px  rgba(255,127,0,0.4),
        0 -22px 30px  rgba(255,127,0,0.1);
    }
  </style>
  <link href="" style="text/css" rel="stylesheet"/> 
 </head>

 <body>
  <p class='p1'>Beautiful Text</p>
  <p class='p2'>Beautiful Text</p>
  <p class='p3'>Beautiful Text</p>
  <p class='p4'>Beautiful Text</p>
  <p class='p5'>Beautiful Text</p>
  <p class='p6'>Beautiful Text</p>
  <p class='p7'>Beautiful Text</p>
  <p class='p8'>Beautiful Text</p>
 </body>
</html>