聊代码（第四十二集）css样式（之十二）

同样的代码，巧妙设置不同的参数，就可以轻松获得多种不同的效果。

文字立体效果

文字阴影效果

文字描边效果

文字虚背效果

文字叠放效果

文字远影效果

代码：

＜style type="text/css"＞.文字 {text-align: center;font-family: 黑体; color:#ff0; font-size: 35pt; font-weight: bold;} /字体 字色 字号 字划加粗 */

.描边1 {text-shadow: #f00 3px 3px 0 , #f00 0 0 0, #f00 0 0 0, #000 0 0 0; }

.描边1 {text-shadow: #f00 3px 3px 0 , #f00 0 0 0, #f00 0 0 0, #000 0 0 0; }

.描边2 {text-shadow: #f00 5px 5px 7px , #f00 0 0 0, #f00 0 0 0, #f00 0 0 0; }

.描边3 {text-shadow: #f00 1px 0px 0 , #f00 -1px 0 0, #f00 0 -1px 0, #f00 0 1px 0 ; }

.描边4 {text-shadow: #f00 0 0 30px , #f00 0 0 0, #f00 0 0 0, #f00 0 0 0; }

.描边5 {text-shadow: #f00 6px 6px 0 , #f00 0 0 0, #f00 0 0 0, #f00 0 0 0 ; }

.描边6 {text-shadow: #f00 6px 20px 10px , #f00 0 0 0px , #f00 0 0 0, #f00 0 0 0; }

＜/style＞

＜div class="文字"＞

＜p class="描边1"＞文字立体效果＜/p＞

＜p class="描边2"＞文字阴影效果＜/p＞

＜p class="描边3"＞文字描边效果＜/p＞

＜p class="描边4"＞文字虚背效果＜/p＞

＜p class="描边5"＞文字叠放效果＜/p＞

＜p class="描边6"＞文字远影效果＜/p＞

代码解析：

文字描边色分为四组，每组有三值，组与组不同，值与值不同，各有各的作用。朋友们，你要想充分了解它，你就给它动动“手术”，一动就全明白了。

(注：您的设备不支持flash)

声明：以上内容仅用户个人行为，不代表本站（老小孩社区）观点，如有侵权或其他行为用户自己承担相关责任与本站无关。【举报文章】