Div卷边阴影HTML5 css3代码

2024-09-05 12:18:59

字体：大中小

来源：转载

供稿：网友

看到网上很多图片边框阴影效果挺漂亮，好像是给Div的两个底角加了斜向的阴影，而且两个底角的阴影又不是对称的，这样的效果更真实自然，所以自己非常喜欢，参考网上的代码，修改了一个CSS Div阴影效果，在火狐或Chrome下表现不错，在IE下的支持不太好，有兴趣的自己改下吧。

<title>HTML5 css3 Div卷边阴影代码</title><style>body { height:120%;scrollbar-face-color:#C0C0C0;  　　scrollbar-highlight-color:#FFFFFF;scrollbar-3dlight-color:#C0C0C0;scrollbar-darkshadow-color:#000000; scrollbar-Shadow-color:#808080; scrollbar-arrow-color:#000000; scrollbar-track-color:#E0E0E0;}.curved_box {display: inline-block;*display: inline;width: 200px;height: 248px;margin: 20px;background-color: #fff;border: 1px solid #eee;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;position: relative;*zoom: 1;}.curved_box:before {    -webkit-transform: skew(-15deg) rotate(-6deg);    -moz-transform: skew(-15deg) rotate(-6deg);    transform: skew(-15deg) rotate(-6deg);    left: 15px;}.curved_box:after {    -webkit-transform: skew(15deg) rotate(6deg);    -moz-transform: skew(15deg) rotate(6deg);    transform: skew(15deg) rotate(6deg);    right: 15px;}.curved_box:before, .curved_box:after {    width: 75%;    height:50%;    content: ' ';    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);    position: absolute;    bottom: 10px;    z-index: -1;}</style><body><div class="curved_box"></div></body>

上一篇：HTML5中使用正则表达式的例子

下一篇：CSS3制作的新浪LOGO，超牛气

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注