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

html-css018

css怎么实现边框3D凹凸感觉(求大佬给个实现方向吧~~),第1张

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" />