如何在沒有圖像的情況下創建CSS3紙捲

本教程演示了創建沒有圖像的CSS3紙捲曲效果。 先前的教程展示瞭如何使用CSS3的:before>和:after偽元素來創建語音氣泡和緞帶；這是基於該技術的。

紙捲曲效果是一種光學幻覺，通常在元素的底部通過陰影實現。 以前，此必需的圖像編輯軟件。 CSS3提供了優越的選擇。 使用CSS3的優點包括：瀏覽器兼容性（它在較舊的瀏覽器中優雅地降低），背景獨立性，可伸縮性，可重複使用的代碼和易於自定義。

>

首先，創建一個簡單的html元素：

<code class="language-html"><div class="box">My box</div></code>

然後，使用

> box-shadow添加基本的內部和外部陰影：

>

<code class="language-css">.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);
}</code>

使用兩個:before和:after pseudo元素創建捲曲效果。這些是：

1. 使用CSS3變換旋轉並偏斜。
位於底部邊緣。
給定A
3. 。 box-shadow

設置

將偽元素放在主框後面，僅使陰影邊緣可見：> z-index: -1

偽元素的CSS：

>這使用供應商前綴來進行更廣泛的瀏覽器支持，但它仍然比基於圖像的解決方案更有效。 該效果在現代瀏覽器中起作用；較舊的瀏覽器將簡單地省略陰影。 提供了一個演示頁面（由於輸入中未提供鏈接，因此省略了鏈接）。 CSS嵌入HTML中。 IE6、7和8將優雅地降級而不會顯示陰影效果。

<code class="language-css">.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);
}</code>

>

關於純CSS3紙捲的常見問題（常見問題解答），因為它們已經在原始文本中得到了很好的解決方案。

以上是如何在沒有圖像的情況下創建CSS3紙捲的詳細內容。更多資訊請關注PHP中文網其他相關文章！