border-style 可以使用
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
来实现一个3D边框效果
具体方法可以参考 border-style | 菜鸟教程
要让按钮做到有凹凸感,实际上就是利用光线照射来形成阴影的原理。这是最简单也是最常见的一种,光线从左上方照过来,使按钮的右侧和下方形成深色阴影(可以根据需要调节边框的宽度和颜色):
<input type="button" value="有凹凸感的按扭" style="border:1px solid #dddborder-bottom:1px solid #333border-right:1px solid #333" />