CSS3 Shadows浏览器支持情况
text-shadow 和 box-shadow 这两个属性在主流现代浏览器上得到了很好的支持( > Chrome 4.0, > Firefox 3.5, > Safari 4.0, > Opera 9.6, > IE10)。
text-shadow 和 box-shadow 的不同之处:
box-shadow语法:
CSS Code复制内容到剪贴板
box-shadow:none|h-shadow v-shadow blur spreadcolor|inset|initial|inherit;
text-shadow语法:
CSS Code复制内容到剪贴板
text-shadow: h-shadow v-shadow blurcolor|none|initial|inherit;
这里只有几个不同点:
不能为文本创建一个内阴影
有文字阴影没有扩散距离
但是可以创建多个阴影(显示在彼此的顶部)。
text-shadow学习
color 和 offsets
在下面的例子中,我们定义了水平和垂直偏移和自定义颜色
CSS Code复制内容到剪贴板
text-shadow:10px10px;
text-shadow:-5px-5px;color:blue;
text-shadow:-1px-1pxwhite;color:blue;background:#888;
text-shadow:1px1pxrgba(255,255,255, 0.5);color:blue;background:#eee;
注意,正值使阴影往右/下移动,负值往左/上移动
阴影的颜色是可选的,如果颜色没填,就使用从父级继承的颜色。然而,在不同的浏览器下可能会有所不同,所以我建议定义颜色项(RGB或RGBA和HSLA等)。
blur
在下面的例子中,我们定义了各种模糊:
模糊是可选的参数,它定义了距离模糊。它应该是一个正数(因为0意味着没有模糊)。下面的图片,说明它是如何工作的:
CSS Code复制内容到剪贴板
element {
text-shadow:5px5px3pxdarkred;color:red;
}
element {
text-shadow:4px-4px10pxred;
color:azure;
background:#333;
}
element {
text-shadow:0px0px4px;
}
parent {
color:red;
}
element {
text-shadow:0px0px4px;
}
parent {
color:lightgray;
background:#333;
}
第一个例子使用不同的模糊距离,最后两个例子我们不设置颜色,但采用不同的颜色和背景色的父级。
Expansion 和 contraction
与box-shadow类似,spread 属性将要在css4中要添加。目前,它得到了ie10(可能是更现代的浏览器)的支持。这是text-shadow的第四个参数。你可以使用这个参数的扩大、缩小阴影。
CSS Code复制内容到剪贴板
text-shadow:5px5px0px3pxlightgreen;color:green;
text-shadow:8px8px2px-3pxdarkgreen;color:green;font-weight:900;
text-shadow:0 0 03pxrgba(128, 255, 0, 0.75);color:green;background:#333;
正值扩大阴影,负值缩小阴影。零的值可用于给文本加边(第三例)。
多阴影
正如我们之前说的,你可以给文字加多个阴影:
简单的加边例子:
CSS Code复制内容到剪贴板
text-shadow: 0 0 03pxwhite, 0 0 04pxgray;color:magenta;/* example 1: basic outlining */
text-shadow:3px3px4px2pxrgba(255,255,255,0.35),/* example 2 */
6px-6px4px2pxrgba(255,255,255,0.25),
-3px-3px4px6pxrgba(255,0,255,0.15);
text-shadow: 0 0 03pxwhite,/* example 3: neon - 1 */
0 02px6pxmagenta,
0 01px9pxwhite,
0 06px12pxmagenta;
color:magenta;
text-shadow: 0 02px#fff,/* example 4: neon 2 */
0 04px2pxrgba(255,255,255,0.5),
0 06px6px#f0f,
0 04px7px#fff,
0 03px15px#222,
-4px02px9px#f0f,
4px02px9px#f0f,
0 -4px2px9px#f0f,
04px2px9px#f0f;
color:white;
CSS Code复制内容到剪贴板
text-shadow: 0 -3px3px15pxwhite, 01px2px9px;/* example 5: text underlining */
color:magenta;
运行效果:
已经说过“spread”是css4的属性),但是你仍然用CSS3模拟:
CSS Code复制内容到剪贴板
text-shadow:0px0px0px4pxmagenta;
/* is similar to: */
text-shadow: magenta0px2px,
magenta2px0px,
magenta -2px0px,
magenta0px-2px,
magenta -1.4px-1.4px,
magenta 1.4px1.4px,
magenta 1.4px-1.4px,
magenta -1.4px1.4px;
例子:
Twin shadow
CSS Code复制内容到剪贴板
text-shadow: 0 02px2pxwhite,
2px02px5px#222,
3px03px6px#933,
5px02px14px#222,
6px05px16px#533;
background-color:#222;
color:white;
Letter-press
text-shadow: 0px 2px 3px #555;
background-color:#333;
Rainbow
CSS Code复制内容到剪贴板
text-shadow: 0 02px3pxyellow,
0 02px6pxorange,
0 02px9pxred,
0 02px12pxlime,
0 02px15pxblue,
0 02px18pxviolet;
3D
CSS Code复制内容到剪贴板
text-shadow: 0 01px#999,
1px1px1px#888,
2px2px1px#777,
3px3px1px#666,
4px4px1px#555,
5px5px1px#444;
background-color:#333;
color:white;
Retro / Vintage
CSS Code复制内容到剪贴板
text-shadow:2px2px#fff,
3px3px#666;
First-letter-only shadow
CSS Code复制内容到剪贴板
.text {
text-shadow:0 05px;
}
.text::first-letter {
color:azure;
text-shadow:0 05px, 00px6px3pxblue, 0 -2px6px6pxcyan, 0 -4px9px9pxlightblue ;
}