css边框样式立体效果图,js改变css边框样式

css怎么实现边框3D凹凸感觉（求大佬给个实现方向吧~~）

border-style 可以使用 

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

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

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

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

来实现一个3D边框效果

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

相关问答

Q1: CSS样式如何设置图片立体效果

能否说得详细一点，什么叫立体效果的背景图片？ 非要通过css设置，就只能设置左边和顶边的边框为浅色模拟高光，右边和底边的边框为深色模拟阴影来做立体效果。如果要复杂一些的立体效果，你就必须通过图片来做了，使用绘图软件绘制一个立体效果的按钮，然后设为按钮背景即可

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

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

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

Q3: html中如何用css让文本框有立体的感觉

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样式是

--单行文本框设置代码--，你可以修改一下做出自己想要的效果

，然后你的文本框调用这个样式就可以了