如何通过CSS设置文字 3D效果

html-css023

如何通过CSS设置文字 3D效果,第1张

<style>

.test

        {

            text-shadow:

            1px 1px 0 #CCC,

            2px 2px 0 #CCC, /* end of 2 level deep grey shadow */

            3px 3px 0 #444,

            4px 4px 0 #444,

            5px 5px 0 #444,

            6px 6px 0 #444 /* end of 4 level deep dark shadow */

        }

</style>

<body>

    <h1>3D效果</h1>

</body>        

// 具体效果可以改变颜色值和位移值来实现不同的3d效果

<style type="text/css">

INPUT.smallInput

{

BACKGROUND-COLOR:#FFFFFF

COLOR:#000000

FONT-SIZE:9pt

FONT-WEIGHT:Normal

TEXT-DECORATION:None

FOTN-FAMILY:宋体,verdana,Arial, Helvetica

TEXT-ALIGN:Left

BORDER-TOP:3 Hidden #808080

BORDER-LEFT:3 Hidden #808080

BORDER-RIGHT:3 Hidden #FFFFFF

BORDER-BOTTOM:3 Hidden #FFFFFF

CURSOR:Text

}

</style>

这个css样式是 --单行文本框设置代码--，你可以修改一下做出自己想要的效果 ，然后你的文本框调用这个样式就可以了