如何使用 CSS 偽元素建立內部​​文字陰影？

使用 CSS 建立內部文字陰影

您正在尋找一種技術來在網頁內的文字上投射模糊的內部陰影。您已經探索了 box-shadow 屬性，但意識到它對內部著色的限制。本文旨在指導您使用一種新穎的技術，利用偽元素來實現您想要的效果。

偽元素技巧

在 CSS 中，偽元素 ( :before 和 :after) 允許在元素內創建附加內容。以下是這些元素創建內部陰影的巧妙應用：

1. 內容： 在文字元素上為標題屬性分配所需的內部陰影內容。此內容將由偽元素使用。
2. 偽元素： 將兩個偽元素（:before 和 :after）加入文字元素。指派與標題屬性相同的內容，並賦予它們相對於原始文字的輕微偏移位置（例如，向左 1px，向上 1px）。
3. 顏色和不透明度： 調整顏色和透明度偽元素的不透明度來創建半透明的模糊陰影。例如，rgba(255, 255, 255, .1) 將建立不透明度為 10% 的白色陰影。
4. Z-Index: 使用以下指令將偽元素定位在原始文字後面z-index 和負值，以確保它們呈現在文字後面。

範例程式碼

以下是示範此技術的範例程式碼：

<code class="css">.depth {
  display: block;
  padding: 50px;
  color: black;
  font: bold 7em Arial, sans-serif;
  position: relative;
}

.depth:before,
.depth:after {
  content: attr(title);
  padding: 50px;
  color: rgba(255, 255, 255, .1);
  position: absolute;
}

.depth:before {
  top: 1px;
  left: 1px
}

.depth:after {
  top: 2px;
  left: 2px
}</code>

<code class="html"><h1 class="depth" title="Lorem ipsum">Lorem ipsum</h1></code>

以上是如何使用 CSS 偽元素建立內部​​文字陰影？的詳細內容。更多資訊請關注PHP中文網其他相關文章！