css3 box-shadow实例盒子阴影（翘边阴影，曲线阴影）

最新推荐文章于 2024-07-25 22:11:00 发布

Seven_Cld

最新推荐文章于 2024-07-25 22:11:00 发布

阅读量3.8k

点赞数

文章标签： web css3

本文链接：https://blog.csdn.net/Christine95/article/details/46879897

版权

本文介绍了如何使用CSS3的box-shadow属性创建曲边和翘边阴影效果，包括水平和垂直偏移量、模糊半径、扩展半径的设置，以及如何处理浏览器兼容性问题。同时提到了伪类before和after的应用，颜色透明度的设定，以及z-index和transform在阴影效果中的作用。

摘要由CSDN通过智能技术生成

做完后效果如下：

上面是曲边阴影，下边是翘边阴影。曲边阴影下部是类似弧线，翘边效果四角旁边翘起阴影。

*{
	margin:0;
	padding: 0;
}

ul{
	list-style: none;
}

.wrap{
	width: 70%;
	height: 200px;
	background-color: #fff;
	margin: 50px auto;
}

.wrap h1{
	text-align: center;
	line-height: 200px;
}

.effect{
	position: relative;
	box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
	-webkit-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
	-o-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
	-moz-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
}

.effect:after,.effect:before{
	content: "";
	position: absolute;
	top:50%;
	bottom: 0px;
	le