溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

CSS怎么實(shí)現(xiàn)段落首字母、首字放大特效

發(fā)布時(shí)間：2021-07-30 17:32:47 來源：億速云 閱讀：446 作者：chen 欄目：web開發(fā)

本篇內(nèi)容主要講解“CSS怎么實(shí)現(xiàn)段落首字母、首字放大特效”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“CSS怎么實(shí)現(xiàn)段落首字母、首字放大特效”吧!

摘要：

　　段落首字母放大是指放大段落開頭的字母或者漢字，主要使用了css的first-letter偽類選擇器。

單行放大：

　　在第一行內(nèi)放大，效果如下：

CSS怎么實(shí)現(xiàn)段落首字母、首字放大特效

代碼如下:


<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <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>
</head>
<body>
   <div class="contain">
       <p>This is a test article. This is a test article.</p>
       <p>This is a test article. This is a test article.</p>
       <p>這是一個(gè)測(cè)試</p>
   </div>
</body>
</html>

注意：first-letter支持IE7+，first-line支持IE8+

多行放大：

　　效果如下：

CSS怎么實(shí)現(xiàn)段落首字母、首字放大特效

代碼如下:


<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title></p> <p></head>
<body>
   <style>
   * {
       margin:0;
       padding:0;
   }
   body {
       font-size:12px;
       font-family: Tahoma, Geneva, sans-serif;
       padding:200px;
   }
   p {
       width:150px;
       color:#000;
       font-size:1em;
       margin-bottom: 20px;
   }
   p:first-letter{
       float: left;
       font-size:2.5em;
       padding-right:5px;
       text-transform:uppercase;
   }
   p:first-line{
       color:#f00;
   }
   </style>
   <p>This is a test article. This is a test article.This is a test article. This is a test article.This is a test article. This is a test article.</p>
   <p>這是一個(gè)測(cè)試。這是一個(gè)測(cè)試。這是一個(gè)測(cè)試。這是一個(gè)測(cè)試。這是一個(gè)測(cè)試。這是一個(gè)測(cè)試。這是一個(gè)測(cè)試。</p>
</body>
</html>

到此，相信大家對(duì)“CSS怎么實(shí)現(xiàn)段落首字母、首字放大特效”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手