如何在没有图像的情况下创建CSS3纸卷

本教程演示了创建没有图像的CSS3纸卷曲效果。 先前的教程展示了如何使用CSS3的:before>和:after伪元素来创建语音气泡和缎带；这是基于该技术的。

纸卷曲效果是一种光学幻觉，通常在元素的底部通过阴影实现。 以前，此必需的图像编辑软件。 CSS3提供了优越的选择。 使用CSS3的优点包括：浏览器兼容性（它在较旧的浏览器中优雅地降低），背景独立性，可伸缩性，可重复使用的代码和易于自定义。

>

首先，创建一个简单的html元素：

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

然后，使用

> box-shadow添加基本的内部和外部阴影：

>

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

使用两个:before和:after<> pseudo元素创建卷曲效果。这些是：

1. 使用CSS3变换旋转并偏斜。
位于底部边缘。
给定A
3. 。box-shadow

设置

将伪元素放在主框后面，仅使阴影边缘可见：> z-index: -1

伪元素的CSS：

>这使用供应商前缀来进行更广泛的浏览器支持，但它仍然比基于图像的解决方案更有效。 该效果在现代浏览器中起作用；较旧的浏览器将简单地省略阴影。 提供了一个演示页面（由于输入中未提供链接，因此省略了链接）。 CSS嵌入HTML中。 IE6、7和8将优雅地降级而不会显示阴影效果。

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

.box:after {
  left: auto;
  right: 12px;
  transform: skew(5deg) rotate(5deg);
}

>

关于纯CSS3纸卷的常见问题（常见问题解答），因为它们已经在原始文本中得到了很好的解决方案。

以上是如何在没有图像的情况下创建CSS3纸卷的详细内容。更多信息请关注PHP中文网其他相关文章！