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

html-css020

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 | 菜鸟教程

css:

a{background:(中间切1-2像素横向循环) repeat-x}

a li{ float:leftbackground:(中间竖线) no-repeat left}

a li a{display:block padding-left:15pxpadding-right:10px}

<div ><img src=前边圆角切图 》</div>

<div class=a>

《ul>

<li style=background:none><a>名称</a></li>

<li><a>名称</a></li>

<li><a>名称</a></li>

</ul>

</div>

<div ><img src=后边圆角切图 》</div>

大体 应该 出来了,在根据自己需要调整一下 就OK了