给CSS加上这个box-shadow: 0px 1px 3px rgba(34, 25, 25, 0.2)就行了,你可以百度一下我的网名,我的站里用了很多这种效果,应该就是你所说的凸出来的效果。
border-style 可以使用
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
来实现一个3D边框效果
具体方法可以参考 border-style | 菜鸟教程
原理:用position的相对定位(relative)和绝对定位(absolute)
简单的例子:
<h3>文字<span>文字</span></h3>
h3{ position:relativecolor:#fff}
h3 span{ position:absolutetop:1pxleft:1pxcolor:#000}
大概就是这样的思路,具体细节你自己去调整。