文字阴影text-shadow笔录
今天来介绍下CSS3的文本阴影特效text-shadow,及常见的适用场景和效果展示
【概述】
text-shadow 为文字添加阴影
①可以为文字与 text-decorations 添加多个阴影,阴影值之间用逗号隔开;
②要为每个阴影指定相对文字的偏移量,可选的颜色及模糊半径;
③多个阴影从前往后叠加,第一个阴影在最前面;
④可以应用在::first-line和::first-letter伪元素上
【兼容】
为了兼容各主流浏览器并支持这些主浏览器的较低版本,基于主流浏览器上使用text-shadow属性时,我们需要将属性的名称前面加上前缀,具体为
谷歌和苹果浏览器-webkit-text-shadow的形式;
Firefox浏览器则需要写成-moz-text-shadow的形式;
欧朋(Opera)浏览器 -o-text-shadow;
IE9+需要写成-ms-text-shadow的形式
【详解】
(1)语法
text-shadow:offset-x | offset-y | blur-radius | color
①offset-x指定水平偏移量,若是负值则阴影位于文字左边(必选)
②offset-y 指定垂直偏移量,若是负值则阴影位于文字上面(必选)
如果两者均为0,则阴影位于文字正后方(如果设置了 blur-radius 则会产生模糊效果)
③blur-radius:模糊半径,如果没有指定则默认为0。值越大,模糊半径越大,阴影也就越大越淡(可选)
注意:模糊程度/半径必须为正整数。
④color:阴影的颜色,可以在偏移量之前或之后指定
(2)案例展示
文本阴影分为单阴影和多阴影,下面分开介绍
①单阴影
先来看个简单例子:
p{ text-align:center; margin:0; font-family:helvetica,arial,sans-serif; color:#999; font-size:80px; font-weight:bold; text-shadow:0.1em 0.1em #333;//右下角阴影 /*text-shadow:-0.1em -0.1em #333;//左上角阴影*/ /*text-shadow:-0.1em 0.1em #333;//左下角阴影*/ /*text-shadow:0.1em -0.1em #333;//右上角阴影*/ /*text-shadow:0.1em 0.1em 0.3em #333;//增加模糊效果的阴影*/ /*text-shadow:0.1em 0.1em 0.3em black;//定义文本阴影效果*/ }
分别为左上角,右上角,左下角和右下角阴影,以及增加模糊效果,定义文本阴影效果等
②多阴影
阴影叠加,每个阴影之间用逗号隔开。每个阴影效果必须指定阴影偏移值,而模糊半径和阴影颜色是可选参数
案例:燃烧文字特效
p{ text-align:center; margin:0; padding:24px; font-family:helvetica,arial,sans-serif; font-size:80px; font-weight:bold; color:#000;//设置文字颜色 background:#000;//设置背景颜色 text-shadow:0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;//使用阴影叠加出燃烧的文字特效 }
当然,还有其他许多经常看到的,例如:外发光,辉光,投影,浮雕,模糊,扫边,3D等效果。
效果一:
text-shadow: 0 0 20px red;
效果二:
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;
效果三:
text-shadow: 0 1px 1px #fff;
效果四:
text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;
效果五:
text-shadow: 0 0 5px #f96;
效果六:
text-shadow:0 0 6px #F96, -1px -1px #FFF, 1px -1px #444;
效果七:
text-shadow: 1px 1px 0 #E4F1FF;
效果八:利用text-shadow在不同方向的偏移量
text-shadow: 3px 3px 0 red,-3px 3px 0 red,3px -3px 0 red,-3px -3px 0 red;
效果九:利用text-shadow在同一方向的叠加效果
text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8);
效果十:利用text-shadow在同一方向的叠加效果
text-shadow: -1px -1px rgba(197, 223, 248,0.8),-2px -2px rgba(197, 223, 248,0.8),-3px -3px rgba(197, 223, 248,0.8),-4px -4px rgba(197, 223, 248,0.8),-5px -5px rgba(197, 223, 248,0.8);
效果十一:
text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee; /*注意:第一个阴影色和背景色相同;文本前景色和第二个阴影色相同*/
最后分享个文本阴影特效应用:黑猫警长首页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本阴影</title> <style type="text/css"> body {/*清除页边距,设计主色调*/ padding: 0px; margin: 0px; color: #666; } #text-shadow-box {/*设计盒子外框样式*/ position: relative;/*让内部的定位元素以这个框为参照物*/ width: 598px; height: 406px; background: #666; overflow: hidden;/*禁止内容超过设定的区域*/ border: #333 1px solid; } #text-shadow-box div.wall {/*设置背景墙样式*/ position: absolute; width: 100%; top: 175px; left: 0px } #text {/*设计导航文本样式*/ text-align: center; line-height: 0.5em; margin: 0px; font-family: helvetica, arial, sans-serif; height: 1px; color: #999; font-size: 80px; font-weight: bold; text-shadow: 5px -5px 16px #000; /*设计右上偏移的阴影,适当进行模糊处理, 产生色晕效果,阴影色为深色,营造静谧的效果*/ } div.wall div {/*设计前面挡风板样式*/ position: absolute; width: 100%; height: 300px; top: 42px; left: 0px; background: #999; } #spotlight {/*设计覆盖在上面的探照灯效果图*/ position: absolute; /*设计一个层,让其覆盖在页面上,并使其满窗口显示, 通过前期设计好的一个探照灯背景来营造神秘效果*/ width: 100%; height: 100%; top: 0px; left: 0px; background: url() center -300px; } #spotlight a { color:#ccc; text-decoration:none; position:absolute; left:47%; top:56%; float:left; } a img { border:none; } </style> </head> <body> <!--本案例的结构外套--> <div id="text-shadow-box"> <!--墙体外结构--> <div class="wall"> <p id="text">黑猫警长</p> <div></div> </div> <!--外罩,通过他可以为页面覆盖一层桌纸,添加特殊的艺术效果--> <div id="spotlight"><a href="index.htm"><img src="" /></a></div> </div> </body> </html>
.