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; 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