CSSWEBSITE

文章来源：http://www.blueidea.com/tech/web/2009/6826.asp

最近我因为要安装 Firebug 1.4 导致我不得不安装了 Firefox 3.5 ,所以很不小心地接触到了Wordpress后台那漂亮的文字阴影.也就是CSS中的text-shadow属性.所以今天我整理了一些资料,希望可以对大家有所启发.

首先我们看看wordpress 2.8后台使用了text-shadow的部分(绿色箭头).觉得怎么样?没错,这些都是CSS3属性,而不是图片做成的.

text-shadow是什么?

text-shadow早在CSS2中已经存在,而现在CSS3也准备将他加入其中.并且由于一直以来只有Safari支持这个属性所以我们很少见到真正的应用,直到最近Firefox 3.5对它的支持然重新唤起了人们对它的兴趣.

text-shadow可以支持给文字加上阴影,这样我们在设计时可以利用css3属性增加文字的质感而不用使用任何图片.
目前支持的浏览器有Firefox 3.1+,Safari 3+,Opera 9.5+等现代浏览器(数据可能有偏差).当然IE家族是无法支持的.

接下来看看text-shadow的语法:

text-shadow:color length length length;

color:颜色; length分别按顺序指“X轴方向长度 Y轴方向长度 阴影模糊半径”
正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上.其中任意一个值可以为零也可为空(将做默认处理)

举个例子:

text-shadow: -1px 2px 3px #ffb69a;

表示X轴方向阴影向左1px,Y轴方向阴影向下2px,而阴影模糊半径3px,颜色为 #ffb69a

一些试验与demo

我做了点小小的试验,做成了一个 Demo页面 .为了让浏览器不支持text-shadow的用户看到阴影效果,请直接看以下截图(有位朋友说那个”火鸟”看起来像”鸡”):

如果你使用的是Firefox 3.1+,Safari等浏览器,那请直接点 Demo演示

为什么使用text-shadow：

• 可以增强文字质感
• 可以减少图片的使用,减少带宽支出
• 随着Firefox 3.5支持text-shadow,不久很多人将可以看到你定义的阴影

不相信?请看看下面的截图,这是对http://tweetcc.com/网站分别在safari 4(win)与Firefox 3.0.11下所进行的截图.很明显在有text-shadow应用下整体文字层次感好了许多.

其他例子

接下来我们继续看看一些有趣的text-shadow下的例子吧,首先看看vikiworks 用text-shadow来显示程序代码.很多人都觉得这个效果很赞,没错,该网站用的就是css3属性.

参考资料及常见问题

看完上面觉得不够,那么可以参考一下下面的文章：

• http://www.css3.info/preview/text-shadow/
• http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows
• http://www.quirksmode.org/css/textshadow.html

问题有:

• 如果使用了blur,也就是定义了阴影模糊半径,会导致页面在滚动时变慢.

转载请注明来源: http://www.ediyang.com/css3-text-shadow-why-and-how/

请留意:本文章旨在抛砖引玉引起大家对CSS3的兴趣.也比较侧重该属性呈现的效果,所以对该属性的技术性讲解及定义都有所偏差,请原谅.

在网上看到的，很有意思，但可能会有重复。

εїз♂ ♀ ♥ ♡ ☜ ☞ ☎ ☏ ⊙ ◎ ☺ ☻ ► ◄ ♨ ◐ ◑ ↔ ↕ ▪ ▫ ☼ ♦ ▀ ▄ █ ▌ ▐ ░ ▒ ▬ ♦ ◊ ◦ ☼ ♠ ♣ ▣ ▤ ▥ ▦ ▩ ◘ ◙ ◈ ♫ ♬ ♪ ♩ ♭ ♪ の ☆→ あ ぃ ￡ ▧ ▨ ♠ ♣๑•ิ.•ั๑๑۩۞۩๑ ♪ ♬ ⓛⓞⓥⓔ ๑۩ﺴ ♬ ♫ ♪

♯♭ $ ஐﻬ◎ ﻬஐ の ☆→ あ ぃ ￡ ♥『』Ψ № ∑ ⌒〖〗＠ξζ∮ ▓ ∏ 卐【】√ ¤ ╋

☞☜︶ இ ℡．○● 彡 ° ₪ ௫ ★ ☆ ⊙ ☺ ☻ ☼ ♠ ♡ ♣ ♤ ♥ ♦ ♧ ♨ ♩ 〠 〄 ㍿ ♩♪♫♬ 큐 ™

㊣㊚㊛㊙㊝㊊㊋㊌㊍㊎㊏㊐⓪ ①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳ⓐ ⓑ ⓒ ⓓ ⓔ ⓕ ⓖ ⓗ ⓘ ⓙ ⓚ ⓛ ⓜ ⓝ ⓞ ⓟ ⓠ ⓡⓢ ⓣ ⓤ ⓥ ⓦ ⓧ ⓨ ⓩ ㊀㊁㊂㊃㊄㊅㊆㊇㊈㊉

◊ ◦☼ ▣ ▤ ▥ ❤ ｡◕‿◕｡♩ ♭ ♪ の▦ ▩ ◘ ◙ ◈ ♫★☆⊕◎Θ﹏﹋﹌【】〖〗※-『』√∴卐 ≈░ ▒ ∵∴§∮♡♪♬๑•ิ.•ั๑♠♣♧✖♂☼▶▷◀◁★☆⊙☺☻☼♠

→ ♧ ぃ ￡ ๑۩۞۩๑ ✲ ❈ ✿ ✲ ❈ ➹ ~.~ ◕‿-｡ ☀☂☁【】┱ ┲ の♈ ➸ ✓ ✔ ✕ ✖ ✟

☜ ☞ ╰☆╮☎ ☏ ⊙ ◎ ☺ ☻ ► ◄ ♨ ◐ ◑ ♦ ♠ ♣ ✣ ✤ ✥ ✦ ✧ ✩ ✫ ✬ ✭ ✮ ✯ ✰ ✱ ✲ ✳ ❃ ❂ ❁ ❀ ✿ ✾ ✽ ✼ ✻ ✺ ✸ ✷ ✶ ✵ ✴ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ❖ (¤^_^¤) べｏべ ⊹⊱⋛⋋۰•● ๑۩ﺴ *.: ｡❀*ﾟ’ﾟ･✿.｡❤ ●•۰． ◕｡◕ ｡◕‿◕｡╰｡✎｡╮ ✲:‧。o(>””<)o o(‧”’‧)o ♥ ♡ (◡‿◡✿) (｡￫‿￩｡) (≧ε≦o) (≧∇≦) (ㄒoㄒ) o(╥﹏╥)o ⋌⋚⊰⊹ ⓛⓞⓥⓔ

♟ ☼ ☀ o O ＃ 【】ψ ▓ ► ◄ ▒ ░ ♀♂ √ ╮╭ ╯╰ ァ ┱ ┲ ☆ ★ ♫ ♬ ♪♩♭♪ ▶ △ ▲ γ ō 凸 ∩∪ ╦ ╩ ⊙ ◎ ▀ ▁ ▂ ▃ ▄ ▅ ▆ ▇ █ ▋▌▍┋ ︻ ︼ ¤ ▽ ㄒ ︶︿ ε ＞＜ ┘┌ ∵ ∴ ∷ ︹ ︺ ╬ ╋ ω ㊣ § ■ Θ I し↑↑↓↓← → ↘↙ ↔↕〓 ☆ ★┣┓┏┫×╰ノ◢ ◣ ◥ ◤ Ω ж ф ю Ю ━╃ ╄━ 卍 ┛┗ ┓┏ ◇ ◆ ㄨ⌒ ※ × ◎ ☂ ☜ ☞ ❤ ♡ ♥『』Ψ № ∑ ⌒〖〗＠ξζ∮ ▓$ @ * &♦

๑۩๑۩۞۩๑۞۩๑❤ ☄ ✂ ☇ ☈ ⊙ ☊ ☋ ☌☍♞ (◡‿◡✿) εїз © ☸ ☹ ๑•ิ.•ั๑ ♂ ♀ → ╃ ♥ ☑ ☒☢ ☸ ☹ ☺ ☻ΩЖ ۞ ₣₪░▒▓Đ ŧːΦ Ќ

☂ ♨ ☎ ☏ ☆ ★ △ ▲ ♠ ♣ ♧ ♟ ♂ ♀ ♥ ❤ ♡ ♫ ♬ ♪ ♩ ♭ ♪ ☜ ☞ ⊙ ◎ ☺ ☻ ⊕ ¤ ☼ o O ♋ ㊝ ► ◄ ◢ ◣ ◥ ◤ ▽ ▧ ▨ ▣ ▤ ▥ ▦ ▩ ◘ ◙ ▓ ▒ ░ ■ Cafｅ № ＠ ㊣ ™ ℡ 凸 ☃ ❣．•● ➸ ❝❞ o(‧”’‧)o ｡◕‿◕｡ べｏべ ⊹⊱⋛⋋ ⋌⋚⊰⊹ ◈ ♦ ◊ ◦ ◇ ◆．۰•● ❤ ●•۰．๑۩۞۩๑✿ ﻬஐ╃✖ ＊°♡﹢ ﺴ ﺴ..．.ஐ☀ ﻬஐஐ

♡.1　⊙●○①⊕◎Θ⊙¤㊣★☆♀◆◇◣◢◥▲▼△▽⊿◤ ◥

♡.2　▆ ▇ █ █ ■ ▓ 回 □ 〓≡ ╝╚╔ ╗╬ ═ ╓ ╩ ┠ ┨┯ ┷┏

♡.3　┓┗ ┛┳⊥﹃﹄┌ ┐└ ┘∟「」↑↓→←↘↙♀♂┇┅ ﹉﹊﹍﹎╭

♡.4　╮╰ ╯ *^_^* ^*^ ^-^ ^_^ ^︵^ ∵∴∥︱ ︳︴﹏﹋﹌︵︶︹︺

♡.5　【】〖〗＠：！/ ” _ < > `,．。≈{}~ ～() _ -『』√ $ @ * & # ※

♡.6　卐 々∞Ψ ∪∩∈∏ の ℡ ぁ §∮“”ミ灬ξ№∑⌒ξζω＊ ㄨ ≮≯ ＋

♡.7　－×÷﹢﹣±／＝∫∮∝ ∞ ∧∨ ∑ ∏ ∥∠ ≌ ∽ ≦ ≧ ≒﹤﹥じ

♡.8　☆veve↑↓⊙●★☆■♀『』◆◣◥▲Ψ ※◤ ◥ →№←㊣∑⌒〖〗＠

♡.9　ξζω□∮〓※∴ぷ▂▃▅▆█ ∏卐【】△√ ∩¤々♀♂∞①ㄨ≡↘↙▂

♡.10　▂ ▃ ▄ ▅ ▆ ▇ █┗┛╰☆╮ ≠ ▂ ▃ ▄ ▅

♡.1．．°∴ ☆．．．°

♡.2　♡o(╥﹏╥)o ♥♡　じ☆ve【 오빠 사랑해요 】*° ^_^…….♧♧

♡.3　┢┦aΡｐy ♡^_^♡　☜♥☞　☞　☜

♡.4　︻︼─一　▄︻┻┳═一　▄︻┳一　▄︻┻═┳一　▄︻┳-一

♡.5　▄︻┻═┳　︻┳═一　▄︻┳一．　▄︻┳═一　︻┳═一oO

♡.6　-─═┳︻　∝╬══→　::======>>　┈━═☆　┣▇▇▇═─

♡.19 Chris’ Blog™ ♪ ♬ ๑•ิ.•ั๑ ♠ ♣ ✖

♡.20 ♂ ♀ ♥ ♡ ☜ ☞ ☎ ☏ ⊙ ◎ ☺ ☻► ◄ ▧ ▨ ♨ ◐ ◑ ↔ ↕ ▪ ▫

♡.21 ☼ ♦ ▀ ▄ █ ▌ ▐ ░ ▒ ▬ ♦ ◊ ◦ ☼ ♠ ♣ ▣ ▤ ▥

♡.22 ▦ ▩ ◘ ◙ ◈ ♫ ♬ ♪ ♩ ♭ ♪ の ☆→ あ ぃ ￡ ❤ ｡◕‿◕｡

♡.ゃōゃ ⊙▂⊙　⊙０⊙　⊙︿⊙　⊙ω⊙　⊙﹏⊙　⊙△⊙　⊙▽⊙

♡.◑▂◐　◑０◐　◑︿◐　◑ω◐　◑﹏◐　◑△◐　　◑▽◐

♡.∩▂∩　∩０∩　∩︿∩　∩ω∩　∩﹏∩　∩△∩　∩▽∩

♡.●▂●　　●０●　　●︿●　　●ω●　　●﹏●　　●△● 　●▽●

♡.∪▂∪　∪０∪　∪︿∪　∪ω∪　∪﹏∪　∪△∪　∪▽∪

♡. ≧▂≦　≧０≦　≧︿≦　≧ω≦　≧﹏≦　≧△≦　≧▽≦

♡. ＞▂＜　＞０＜　＞︿＜　＞ω＜　＞﹏＜　＞△＜　＞▽＜

♡. ╯▂╰　╯０╰　╯︿╰　╯ω╰　╯﹏╰　╯△╰　╯▽╰

♡. ＋▂＋　＋０＋　＋︿＋　＋ω＋　＋﹏＋ ＋△＋　＋▽＋

♡. ˋ▂ˊ　ˋ０ˊ　ˋ︿ˊ　ˋωˊ　ˋ﹏ˊ　ˋ△ˊ　ˋ▽ˊ

♡. ˇ▂ˇ　ˇ０ˇ　ˇ︿ˇ　ˇωˇ　ˇ﹏ˇ　　ˇ△ˇ　ˇ▽ˇ

♡. ˙▂˙　˙０˙　˙︿˙　˙ω˙　˙﹏˙　˙△˙　˙▽˙

♡. ≡(▔﹏▔)≡ ⊙﹏⊙∥∣° ˋ︿ˊ﹀-# ╯︿╰﹀ (=‵′=)

♡. <(‵^′)> 　o(‧””‧)o　　(-__-)b　＼　＿　／

♡. ￣□￣｜｜　　——\\(˙<>˙)/——　　　<(”””O”””)>

♡. (#‵′)凸 　(‵▽′)ψ 　（°ο°）~ @　 (^人^) (＊‧↓˙＊)

♡. (O ^ ~ ^ O) 　[>\/<]　↓。υ。↓ (；°○° ) ( > c < )

♡. 8 y 1 2 3 4 5 6 7 8 9 与 0-=、`

♡.☀☁☂☃☄❉❊❋❖❤❥❦❧☇☈⊙☊☋☌☍☑☒☢ ☸ ☹ ☺ ☻ ☼ ☽

♡.☾♠♡♢♣♤♥♦♧ ♨ ♩ ✙ ✈ ✉ ✌ ✁ ✎ ✐ ❀ ✰ ❁ ❤ ❥ ❦❧

♡.➳ ➽ 〠 〄 ㍿ ♝ ♞ ➳➴➵㊚㊛㊙℗♯♩♪♫♬♭♮ ☎☏☪♈♨ ºº₪¤큐

♡.« » ™♂✿♥㊣♀♀♂© ® ⁂ ℡ↂ░ ▣ ▤ ▥ ▦ ▧ ▨

♡.▩☯♋♛♞♕✈✎✏┇┅✐✌✍✡✓✔✕✖ ♂ ♀ ♥ ♡

♡.☜ ☞ ☎ ☏ ⊙ ◎ ☺ ☻ ► ◄ ◐ ◑ ↔ ↕☼ ♦♦ ◊ ◘

♡.◙✗✘✚✪✣✤✥✦✧✩✫✬✭✮✯✰

♡.ぁあぃいぅうぇえぉおか がきぎくぐけ

♡.げこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはば

♡.ぱひびぴふぶぷへべぺほぼぽまみむめも

（*∩_∩*）′ ❤。❤ ♠♥♣●︶ε︶●♦

=^。^=oοО o(≧﹏≦)o o(‧”’‧)o

♡~⌒ō⌒~ ．．°∴ ☆．．．°♡ ミ●﹏⊙ミ

⊙▂⊙ ⊙０⊙ ⊙︿⊙ 　⊙ω⊙ 　 ⊙﹏⊙　 ⊙△⊙　 ⊙▽⊙

∪▂∪　 ∪０∪　 ∪︿∪　 ∪ω∪　 ∪﹏∪　 ∪△∪　 ∪▽∪

＋▂＋　 ＋０＋　 ＋︿＋　 ＋ω＋　 ＋﹏＋ ＋△＋ 　＋▽＋

︽⊙＿⊙︽ (⊙＿⊙) (@口@) Σ(@)(￣￣)+ Σ(⊙▽⊙”a

这样当其他人(如管理员)查看该用户的Profile时，上面这段JavaScript执行，然后将管理员的cookie发送给某个url(可以是一个收集cookie的站点)
这样，管理员的登录认证等信息就暴露了！

而Rails提供了TextHelper#sanitize方法来预防XSS攻击

一、DIV标记与SPAN标记
div和span都可以作为一个容器，集体控制容器内的样式
区别是div使块级元素，前后会有换行
而span是行内元素，前后不会换行
div内可以有span，而span内不能有div

二、盒子模型
1，概念
任何页面元素都可以看成一个盒子
一个盒子模型由content、padding、border、margin四部分组成
width(height)的值指content的width(height)+padding的值

2，border
color
width: thin、medium、thick、数值
style: none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset
border-top、border-bottom、border-left、border-right
IE不支持border-style

background-color在IE中指content+padding，FF中指content+padding+border

3，padding
padding-top、padding-bottom、padding-left、padding-right

4，margin
margin-top、margin-bottom、margin-left、margin-right
对一行而言，两个块的margin = margin-right + margin-left
对换行而言，两个块的margin = margin-bottom和margin-top中较大者
对父子而言，子块的margin = 子块的margin + 父块的padding
当margin设为负数时，块会向相反的方向移动，甚至覆盖另外的块

三、元素的定位
1，float
值可以为left、right或默认none，left和right分别向父元素的左侧或右侧靠紧
可以设置clear: left、right、both来清除float对其的影响

2，position
static: 默认值，保持原位
absolute: 绝对位置，top、bottom、right、left可以指定绝对值或百分比，CSS默认后加入到页面的元素会覆盖之前的原始
relative: 相对父块来定位，top、bottom、right、left
fixed: 本质上和absolute一样，但是块不会随着浏览器滚动条而上下移动，IE不支持fixed属性

3，z-index
z-index指垂直与页面方向的z轴，z-index值大的块位于值小的块上面，会形成覆盖效果

四、图片签名

 <div id="block1"><img src="building.jpg" border="0"></div>
<div id="block2">xxx's photo</div> 
#block1 {
padding: 10px;
border: 1px solid #0000;
float: left;
}
#block2 {
color: white;
padding: 10px;
position: absolute;
left 255px;
top: 205px;
}

五、文字阴影

<div id="block1">CSS定位阴影</div>  
<div id="block2">CSS定位阴影</div> 
#block1 {
position: relative;
z-index: 1;
}
#block2 {
color: #AAAAAA;
position: relative;
top: -1.06em;
left: 0.1em;
z-index: 0;
}

前面的写法是照顾FF，后面的写法是照顾IE。