如何创建没有图像的CSS3纸卷毛

在我以前的文章中，我们发现了如何创建语音泡沫和彩带无需额外的HTML元素或图像。 它们是通过将CSS3效果应用于：before和：after伪元素来实现的。 在本文中，我们将使用类似的技术来创建CSS3纸张卷曲效果。

卷纸已经流行了几年。 观看者看到了一个看上去自然弯曲的盒子，但实际上，这是由元素底部的阴影产生的错觉：

直到最近，您仍需要在Photoshop，Gimp或其他图形包中将阴影创建为图像。 理想情况下，它将是一个24位的alpha透明PNG，可以覆盖在任何背景上-但这会导致较旧的浏览器出现问题。

幸运的是，CSS3提供了一个很好的替代方案，并具有以下优点：

• 该效果在现代浏览器中有效，但不适用于不支持该效果的浏览器。
• 阴影可以覆盖在任何背景上，而无需其他图像。
• 该效果可以应用于任何大小的元素。
• 该代码可重用，并且比基于图像的阴影使用更少的字节。
• 阴影易于配置。 您可以通过一些代码调整来更改颜色或深度。

首先，让我们创建一个HTML元素：

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

并在内部和外部应用一些阴影：

.box
{
	position: relative;
	width: 500px;
	padding: 50px;
	margin: 0 auto;
	background-color: #fff;
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}

现在，我们需要在左下角和右下角卷曲效果。 这是通过创建两个：before和：after伪元素来实现的，它们是：

1. 使用CSS3转换旋转和倾斜（所有最新的浏览器均支持带有供应商前缀的转换）
2. 位于底部边缘，并且
3. 给一个盒子的影子。

现在，我们可以使用z-index: -1将元素移动到主框后面。 因此，仅阴影的边缘变得可见：

伪元素CSS代码：

.box:before, .box:after
{
	position: absolute;
	width: 40%;
	height: 10px;
	content: ' ';
	left: 12px;
	bottom: 12px;
	background: transparent;
	-webkit-transform: skew(-5deg) rotate(-5deg);
	-moz-transform: skew(-5deg) rotate(-5deg);
	-ms-transform: skew(-5deg) rotate(-5deg);
	-o-transform: skew(-5deg) rotate(-5deg);
	transform: skew(-5deg) rotate(-5deg);
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	z-index: -1;
} 

.box:after
{
	left: auto;
	right: 12px;
	-webkit-transform: skew(5deg) rotate(5deg);
	-moz-transform: skew(5deg) rotate(5deg);
	-ms-transform: skew(5deg) rotate(5deg);
	-o-transform: skew(5deg) rotate(5deg);
	transform: skew(5deg) rotate(5deg);
}

要达到某种效果，要花很多供应商前缀的代码，但是与图形相比，它需要更少的字节数和HTTP请求。

请参见演示页面上的示例。 它可以在IE9，Firefox，Chrome，Safari和Opera中正常运行。 IE6，IE7和IE8会正常降级，并且不会显示任何阴影效果。 所有CSS代码都包含在HTML源代码中。

如果您喜欢阅读这篇文章，那么您会喜欢Learnable的 ； 向大师学习新鲜技能的地方。 会员可以立即访问所有SitePoint的电子书和交互式在线课程，例如Learn CSS3 。

本文的评论已关闭。 对CSS3有疑问吗？ 为什么不在我们的论坛上提问呢？

From: https://www.sitepoint.com/pure-css3-paper-curls/