css3实现翘边阴影效果_css shadow 两端翘起

作者：不正经 | 2024-03-18 23:21:01

踩

css shadow 两端翘起

原理：利用css3的box-shadow属性，transform：skew（），rotate（）属性，以及伪元素：after和：before
效果如下图：



<style type="text/css">
		/*box-shadow:x偏移量   y偏移量  模糊度  颜色*/			
		/*翘边阴影 */
		*{
			padding: 0;
			margin: 0;
		}
		.box{
			position: relative;
			margin: 30px auto;
			width:250px;
			height: 350px;
			background: #fff;
			border: 1px solid #eee;
			box-shadow: 0 1px 5px rgba(0,0,0,0.2),0 0 50px rgba(0,0,0,0.07) inset;
		}
		.box:before{
			left: 9px;
		transform: skew(-11deg) rotate(-6deg);			
			}
		.box:after{
			right: 9px;				
			transform: skew(11deg) rotate(6deg);								
		}
		.box:before,.box:after{
			position: absolute;
			bottom: 5px;
			content: "";
			width: 140px;
			height:120px;
			border: 1px solid #ccc;
			box-shadow: 0 1px 20px rgba(0,0,0,0.4);
			z-index: -1;
		}
</style>

<body>
	<div class="box"></div>	
</body>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/266117