关于C3翘边阴影的demo

最新推荐文章于 2021-08-03 21:23:27 发布

a18026219265

最新推荐文章于 2021-08-03 21:23:27 发布

阅读量70

点赞数

原文链接：http://www.cnblogs.com/Xmb-To/p/5407789.html

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>翘边阴影</title>
　　　　　　　　/*翘边阴影样式*/
		<style>
	　　　　.demo {
		    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;
}
/* 用伪类before和after在里面添加transform属性*/
.demo:before {
    -webkit-transform: skew(-15deg) rotate(-6deg);
    -moz-transform: skew(-15deg) rotate(-6deg);
    transform: skew(-15deg) rotate(-6deg);
    left: 15px;
}
.box:after {
    -webkit-transform: skew(15deg) rotate(6deg);
    -moz-transform: skew(15deg) rotate(6deg);
    transform: skew(15deg) rotate(6deg);
    right: 15px;
}

.demo:before, .box:after {
    width: 70%;
    height: 55%;
    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>
	</head>
	<body>
		<div class="demo">
			<h3>翘边阴影-我的demo</h3>
		</div>
	</body>
</html>



效果图如下：

转载于:https://www.cnblogs.com/Xmb-To/p/5407789.html

a18026219265

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于C3翘边阴影的demo

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>翘边阴影</title>　　　　　　　　/*翘边阴影样式*/ <style> 　　　　.demo { display: inline-b...
复制链接

扫一扫