css div 边框阴影利用背景图或内外层div实现层次感觉阴影效果

在网页布局中偶尔会用到div 边框阴影做一些特殊效果本文介绍两种实现方法:一种是利用内外层的div边框来实例层次感觉的css边框阴影效果,另一种是利用了背景图片再加内外div来实现的这种效果更漂亮,需要了解的朋友可以参考下

两种实现方法一种是利用内外层的div边框来实例层次感觉的css边框阴影效果,另一种是利用了背景图片再加内外div来实现的这种效果更漂亮。
简单一点的纯css

复制代码
代码如下:



cssdiv边框阴影

body{padding:200px;}
div{border-width:1px;border-style:solid;padding:1px;}
.a{background-color:#f3f3f3;border-color:#fbfbfb;}
.b{background-color:#d8d8d8;border-color:#e8e8e8;}
.c{background-color:#fff;border-color:#bbb;height:100px;color:#ff0000;}





边框为阴影效果






复杂一点的利用图片背景

复制代码
代码如下:




css边框阴影



css阴影:

这段边框阴影效果怎么样呢?




以上就是css div 边框阴影利用背景图或内外层div实现层次感觉阴影效果的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » CSS 教程

相关文章