css3 文字的设置

1.text-shadow 有3个length参数，第1个表示水平偏移，第2个表示垂直偏移，第3个表示模糊（可选） .text11{text-shadow: 3px 3px 5px #f00 ;color: yellowgreen;} 

2.-webkit-text-stroke 描边的文字： -webkit-text-stroke: 1px yellow 描边为1px

3.box-reflect 文字倒影： -webkit-box-reflect: below 10px; 文字和倒影之间相隔10px， -webkit-box-reflect: below 1px linear-gradient(transparent,transparent 50%,rgba(0,0,0,.3)); 可使用Gradient图像或image作为遮罩。

4.text-fill-color 文字填充  -webkit-text-fill-color:#f00; 直接填充， -webkit-text-fill-color:transparent;-webkit-text-stroke:1px #000; 镂空文字。

　　 background-image:-webkit-linear-gradient(#fff,#000);-webkit-background-clip:text;-webkit-text-fill-color:transparent; 渐变文字。

　　 background-image:-webkit-linear-gradient(#fff,#000);-webkit-background-clip:text;-webkit-text-fill-color:transparent; -webkit-text-stroke:1px transparent; 加上描边，效果会更好一点。

  line-height:320px; height:320px; width:100%; text-align:center; letter-spacing:-2rem; font-size:15rem; font-weight:bolder; background:url(../img/bg.gif) repeat center center; -webkit-text-fill-color:transparent; -webkit-background-clip:text; 

可以放一个gif，效果也是可以的。

转载于:https://www.cnblogs.com/vipp/p/6645284.html