🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
* 形式: box-shadow:水平偏移值 垂直偏移值 [模糊值] [颜色] ; * 说明: 1,偏移值可以为负。 2,模糊值不能为负。 3,颜色如不设置,则默认随字体颜色。一般设置为灰色(gray)比较逼真。 4,可以设置多个阴影,每个阴影的设置相互用逗号(,)隔开就可以。 * 举例: .box1{ text-shadow: 2px 2px red; } .box2{ text-shadow: 2px 5px 2px #00FFFF; } .boxe{ text-shadow: 2px 5px 0 red, -2px -2px 0 #f0f0f0; * 演示案例: ``` <style> .box1{ font-size:40px; text-shadow: 2px 2px 0px red; } .box2{ font-size:40px; text-shadow: 2px 2px 0px red, -2px -2px 0px red; } .box3{ font-size:100px; background: gray; color:gray; text-shadow:-2px -2px 0 white, 2px 2px 0 black; } .box4{ font-size:100px; background: gray; color:gray; text-shadow:-2px -2px 0 black, 2px 2px 0 white; } </style> </head> <body> <div class="box1">一些文字,some texts</div> <div class="box2">一些文字,some texts</div> <hr> <h3>凹凸文字效果</h3> <div class="box3">一些文字,some texts</div> <div class="box4">一些文字,some texts</div> </body> ``` 结果如下所示: ![](https://img.kancloud.cn/84/90/849071e30511145f92b4d045c4675eac_694x459.png) 彩色文字 本质: 就是用“图”作为文字“笔画线”的背景! 这里的图,我们用这个:background-image: linear-gradient(); 再 结合这个属性:background-clip:text; /*背景从文字笔画线以外裁切掉*/ 以及结合这个属性:text-fill-color: transparent; //设置文字笔画线为透明色。 代码如下: ![](https://img.kancloud.cn/8d/3d/8d3df28169fd9d94c7417a1e7c78404e_1004x421.png)