一個簡單的CSS Drop-CAP

您不可能未能注意到我們在新博客設計中使用的Drop-CAP效果，以及大多數瀏覽器顯示的一線尺寸（出於Safari除外，出於我稍後會解釋的原因）。

有很多用於實現此效果的駭客方法，但是使用：第一字母和：一線偽級是純CSS 。

這種方法意味著沒有其他標記，沒有圖像，也不需要了解內容 - 無論第一字母和第一行都是什麼，它們都會適用。

這是CSS 實現的：

#post-content > p:first-child:first-line, 
#post-content > .ad:first-child + p:first-line
{
    text-transform:uppercase;
    position:relative;
    font-size:0.95em;
    letter-spacing:1px;
}

#post-content > p:first-child:first-letter, 
#post-content > .ad:first-child + p:first-letter
{
    letter-spacing:0;
    text-transform:uppercase;
    color:#628fbe;
    font-family:times,serif;
    font-size:3.5em;
    float:left;
    margin:0.13em 0.2em 0 0;
    line-height:0.7;
}

您會注意到如何在內容區域內的第一段中嘗試將效果應用於效果。它需要足夠靈活，以便在段落之前允許或缺乏AD的存在，標記為

。因此，理想情況下，我本來可以使用的：一鍵式，它在其父上下文中選擇了指定類型的第一個元素：

#post-content > p:first-of-type:first-line
{
}

#post-content > p:first-of-type:first-letter
{
}

但這並沒有得到廣泛的支持；我們使用的選擇器意味著我們獲得了我們否則不會的IE8

的支持。

對於一線提高，我們不幸的是，我們沒有得到野生動物園的支持。這不是因為選擇器支持此處顯示的所有示例，並且確實在這些規則中應用了其他屬性，而是不應用文本轉換。這是我在許多不同的情況下注意到的事情，在許多不同的情況下，Safari不應用轉換，並沒有明顯的原因。我已經看到它不適用於適用於相應的的元素，在這裡我們看到它不適用於該段落的第一行，即使它適用於整個段落，它也可以使用！去數字。

對於下盤本身，您可以看到它實現非常簡單。該規則中值得注意的是，將字母融入到位的邊距和線路高處的結合。如果我們省略了這兩個屬性，我們會得到這一點：

施加線高之前的滾筒帽。

您從左到右看到的是Firefox，Opera和Safari。實際上，這是渲染不正確的，而歌劇和野生動物園則正確 - Firefox仍在將父段的線條高度施加到第一個字母上，而忽略了其他瀏覽器，而其他瀏覽器則正確地應用了與字母的字體大小相對應的線條高度。

因此，我們可以利用差異來撤離瀏覽器之間的結果 - 逐漸減少線路高度，這對Firefox沒有任何影響，直到我們在Opera和Safari（以及IE8

）中獲得類似的結果：

施加線高後的下盤。

然後，這只是添加邊距頂部的情況，直到垂直位置看起來正確。

這不是我第一次在Firefox中看到這種渲染行為。而且，由於我們沒有隻能適用於Firefox的CSS hacks，因此這樣的差異實際上是我們應用瀏覽器調整的唯一方法。隨著瀏覽器的調整，這完全是防止未來的 - 如果Firefox曾經修復其實現並應用正確的線路高度，那麼它將像其他人一樣首先出現。

具有諷刺意味的是，當Firefox是唯一錯誤的瀏覽器時，我們最終應該修復除Firefox以外的所有瀏覽器！但這就是我們行業的運作方式 - 像您的Missus一樣，Firefox是“永遠正確的”。

縮略圖信用： 經常詢問有關CSS Drop Cap

的問題（常見問題解答）

什麼是CSS下降帽，為什麼使用它？

a css Drop Cap是一種印刷樣式，其中段落的第一個字母大於其餘的字母，並且掉落以跨越幾行。它用於引起對作品開始的關注，使其在視覺上更具吸引力和更易於閱讀。這種樣式經常在書籍，雜誌和網站中看到，以增強用戶體驗和參與度。

如何創建CSS掉落帽？ >

我可以自定義CSS掉落帽的外觀嗎？您可以更改字體，顏色，大小，甚至添加背景或邊框。這使您可以創建一種獨特且具有視覺吸引力的設計，該設計與您的網站的樣式和品牌相匹配。

是否有CSS Drop Cap的瀏覽器兼容性問題？但是，在不同的瀏覽器如何呈現下降蓋時可能存在一些不一致之處，尤其是在垂直對齊和填充方面。在多個瀏覽器中測試您的設計總是一個好主意，以確保其看起來按預期進行。

我可以使用任何文本元素使用CSS Drop Cap嗎？

>

> CSS Drop Cap可以應用於任何塊級文本元素，例如段落，標題和divs。但是，它可能與預期的內聯元素或具有內聯的顯示值的元素無法正常工作。

>

>為什麼我的CSS下降蓋不起作用？最常見的問題是錯誤的CSS語法，將樣式應用於內聯元素或瀏覽器兼容性問題。確保您的CSS是正確的，該元素是塊級元素，並且您的瀏覽器支持:: First Lotter pseudo-Element。

>我如何使我的CSS掉落帽響應能力響應？

>

可以使您的CSS下降帽響應響應，您可以使用媒體Queries的大小和位置來調整尺寸的尺寸和位置。這樣可以確保您的滴帽在所有設備上看起來都不錯，從台式機到手機。

我可以對我的CSS掉落蓋蓋動畫嗎？您可以創建諸如淡入，彈跳或旋轉之類的效果，以使您的滴帽更具動態性和引人入勝。您可以將顏色，圖像或梯度指定為背景。您還可以調整背景的尺寸和位置以適合您的設計。

>我可以將CSS Drop Cap與Web字體使用？

是的，您可以將CSS Drop Cap與Web Fonts一起使用。您可以在CSS中指定字體家庭，以使用自定義字體為您的下降蓋。這使您可以創建與網站風格和品牌相匹配的獨特和個性化的設計。

>

以上是一個簡單的CSS Drop-CAP的詳細內容。更多資訊請關注PHP中文網其他相關文章！