首頁  >  文章  >  web前端  >  css怎麼實現字型放大特效? (首字符變化代碼實測)

css怎麼實現字型放大特效? (首字符變化代碼實測)

藏色散人
藏色散人原創
2018-08-09 14:59:036445瀏覽

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>

本機程式碼測試結果如下截圖:

css怎麼實現字型放大特效? (首字符變化代碼實測)

注意::first-letter 選擇器用於選取指定選擇器的首字母。且first-letter支援IE7 ,first-line支援IE8

以下屬性可與:first-letter 使用:

字體屬性

顏色屬性

背景屬性

外邊距屬性

內邊邊距屬性

邊框屬性

text-decoration

vertical-align(只有在float 為'none' 時)

text-transform

line-height

float

clear

【相關文章推薦】

網頁中各種設定字體大小的方法總結

PHP網站中利用css設定字體大小的總結

#行動端最佳字體大小設定

HTML網頁字體大小的設定





#

以上是css怎麼實現字型放大特效? (首字符變化代碼實測)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn