css怎样让边框有另一张图这样的立体效果

html-css022

css怎样让边框有另一张图这样的立体效果,第1张

你好，可以通过设置边沿颜色实现：border-bottom: solid 1.5px #333

说明：可以改变bottom表示向下，1.5px 表示他的大小，#333 是颜色，我这里设置是黑色，你可以设置你想要的。设置right，top , left , bottom表示他所在的方向。

border-style 可以使用 

groove    定义 3D 凹槽边框。其效果取决于 border-color 的值。  

ridge    定义 3D 垄状边框。其效果取决于 border-color 的值。  

inset    定义 3D inset 边框。其效果取决于 border-color 的值。  

outset    定义 3D outset 边框。其效果取决于 border-color 的值。 

来实现一个3D边框效果

具体方法可以参考 border-style | 菜鸟教程

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