css中怎么让div感觉上是凸出来的

html-css09

css中怎么让div感觉上是凸出来的,第1张

这个简单,给DIV层加上边框阴影就可以了

给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}

大概就是这样的思路,具体细节你自己去调整。