[i=s] 本帖最后由 来打我呀 于 2014-8-30 11:30 编辑 [/i]
[p=24, null, left][mw_shl_code=html,true]
Demo
来打我呀
来打我呀
来打我呀
来打我呀
来打我呀
[/mw_shl_code]
[/p][p=24, null, left][size=15px]内阴影的文字效果是利用text-shadow属性根据不同光源制作出来的。需要注意三个颜色的配置问题，背景色，前景色，阴影色需要采用有一定的亮度对比色，这样效果更佳，请看下面的效果。[/size][/p] [mw_shl_code=css,true].insetText h2{ color: #f00; text-shadow: 1px 1px 0px #212121; }[/mw_shl_code][p=24, null, left][size=15px]效果如下所示：[/size][/p][p=24, null, left][size=15px][img]http://www.w3cplus.com/sites/default/files/inset.png[/img][/size][/p][p=24, null, left][size=15px][b]text-shadow[/b]的使用请点[color=rgb(41, 180, 240)][url=http://www.w3cplus.com/node/52]这里[/url][/color]。[/size][/p][b]3D Text(3D立体效果)[/b][p=24, null, left][size=15px]3D文字效果，在《[color=rgb(41, 180, 240)][url=http://www.w3cplus.com/node/52]CSS3的文字阴影—text-shadow[/url][/color]》有详细介绍，这里没有使用其他的html标签，只是多次应用了CSS3中的text-shadow属性，进行多次阴影设置，并设置不同的阴影色，从而达到一个立体的文字效果。[/size][/p] [mw_shl_code=css,true] .text3D h2 { color: #fff; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.3),0 3px 5px rgba(0,0,0,0.2),0 5px 10px rgba(0,0,0,0.25); }[/mw_shl_code][p=24, null, left][size=15px]效果如下所示：[/size][/p][p=24, null, left][size=15px][img]http://www.w3cplus.com/sites/default/files/3d.png[/img][/size][/p][b]Neon Lights Effect(霓虹灯效果)[/b][p=24, null, left][size=15px]霓虹灯效果主要是多次使用text-shadow属性制作阴影，只是这里有一点需要注意，在制作阴影时不设置任何X轴和Y轴的值，只是设置其模糊半径值，并且每次的blur半径取值不同，而且后面的值总是比前面的值大。[/size][/p] [mw_shl_code=css,true].neonText h2 { color: #fff; text-shadow:0 0 5px #CCCCCC, 0 0 10px #CCCCCC, 0 0 15px #CCCCCC, 0 0 20px #095816, 0 0 25px #095816, 0 0 30px #095816, 0 0 50px #095816, 0 0 80px #095816, 0 0 100px #095816, 0 0 150px #095816 }[/mw_shl_code][p=24, null, left][size=15px]效果如下所示：[/size][/p][p=24, null, left][size=15px][img]http://www.w3cplus.com/sites/default/files/neon.png[/img][/size][/p][b]Letterpress Effect (凸版效果)[/b][p=24, null, left][size=15px]Letterpress Effect和前面的Inset Effect效果很相似，不同之处是Lefferpress使用模糊值产生一种立体效果。这种效果一般配合在有纹理的背景下使用。[/size][/p] [mw_shl_code=css,true] .letterpressText h2 { color: #222; text-shadow: 0px 2px 3px #555; }[/mw_shl_code][p=24, null, left][size=15px]效果如下所示：[/size][/p][p=24, null, left][size=15px][img]http://www.w3cplus.com/sites/default/files/letterpress.png[/img][/size][/p][b]Text Embossing(浮雕效果)[/b][p=24, null, left][size=15px]浮雕效果我们在这里分两种效果，其中一种是背景色是暗色，前景色是亮色，另一种是背景色是亮色，而前景色是暗色，下面我们先来看第一种：[/size][/p] [mw_shl_code=css,true] .embossing h2 { color: #FFFFFF; text-shadow: 0 -1px 0 #374683; }[/mw_shl_code][p=24, null, left][size=15px]效果如下所示：[/size][/p][p=24, null, left][size=15px][img]http://www.w3cplus.com/sites/default/files/text-embossing.png[/img][/size][/p][p=24, null, left][size=15px]第二种，背景色为亮色，前景色为暗色：[/size][/p] [mw_shl_code=css,true].embossingTwo h2 { color: #737373; text-shadow: 0px 1px 0px #e5e5ee; }[/mw_shl_code][p=24, null, left][size=15px]效果如下所示：[/size][/p][p=24, null, left][size=15px][img]http://www.w3cplus.com/sites/default/files/text-embossing2.png[/img][/size][/p][b]Stroke Effect(描边效果)[/b][p=24, null, left][size=15px]在webkit内核的浏览器中我们可以使用text-stroke来制作文字描边或抽空的效果。[/size][/p] [mw_shl_code=css,true].stroke h2 { color: #c00; -webkit-text-stroke: 1px #000; }[/mw_shl_code][p=24, null, left][size=15px]效果如下所示：[/size][/p][p=24, null, left][size=15px][img]http://www.w3cplus.com/sites/default/files/stroke.png[/img][/size][/p][p=24, null, left][size=15px]上面这种效果，在Firefox下可以模拟上面的效果[/size][/p] [mw_shl_code=css,true]color: #c00; text-shadow: 1px 1px 0 #000,-1px -1px 0 #000;[/mw_shl_code][p=24, null, left][size=15px]在webkit还有一个text-fill-color制作一种抽空文字的效果[/size][/p] [mw_shl_code=css,true].strokeTransparent h2 { -webkit-text-stroke: 1px #000; -webkit-text-fill-color: transparent; }[/mw_shl_code][p=24, null, left][size=15px]效果如下所示：[/size][/p][p=24, null, left][size=15px][img]http://www.w3cplus.com/sites/default/files/stroke-transparent.png[/img][/size][/p][p=24, null, left][size=15px]
[/size][/p]
