css在網頁製作中有著在非常重要的作用,一個頁面或頁面中的一篇文章除了內容上的吸引力,如何在樣式上抓住用戶的眼球呢?例如本篇文章就是介紹css字體放大的特效及css首字符放大的效果展示實現。有需要的朋友可以參考下。
css字體放大特效具體程式碼範例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首字母放大测试</title> </head> <body> <div class="contain"> <p>This is the CSS test</p> <p>This is the CSS test</p> <p>这是一个css测试</p> </div> </body> </html>
style.css程式碼如下:
<style> body { background-color: #FFFFFF; color: #595959; } .contain { width: 150px; } .contain p { font: 80%/1.6 Verdana, Geneva, Arial, Helvetica, sans-serif; } .contain p:first-letter { font-size: 2em; padding: 0.1em; color: #000000; vertical-align: middle; } .contain p:first-line { color: red; } .contain p:first-child:first-letter { color: red; } .contain p:first-child:first-line { color: inherit; } </style>
本機程式碼測試結果如下截圖:
注意::first-letter 選擇器用於選取指定選擇器的首字母。且first-letter支援IE7 ,first-line支援IE8
以下屬性可與:first-letter 使用:
字體屬性
顏色屬性
背景屬性
外邊距屬性
內邊邊距屬性
邊框屬性
text-decoration
vertical-align(只有在float 為'none' 時)
text-transform
line-height
float
clear
【相關文章推薦】
以上是css怎麼實現字型放大特效? (首字符變化代碼實測)的詳細內容。更多資訊請關注PHP中文網其他相關文章!