欢迎光临
我的个人博客网站

使用CSS3的伪元素进行首字母下沉和首行改变样式


网页中常见的一种效果,首字改变样式或者首行改变样式,效果如下图。

使用CSS3的伪元素进行首字母下沉和首行改变样式

代码:

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Document</title>   <style>     .demo1 {       width: 300px;       height: 200px;       border: 1px solid #000;       overflow: auto;     }     /* 首字母改变样式 */     .demo1 p::first-letter {       color: red;       font-size: 40px;       font-weight: bold;       float: left;     }     .demo2 {        width: 300px;       height: 200px;       border: 1px solid #000;       overflow: auto;       margin-top: 200px;     }     .demo2::first-line {       color:salmon;     }   </style> </head> <body>   <div class="demo1">     <p>       我是内容,测试内容,内容我是内容,测试内容,内容我是内容,测试内容,内容       我是内容,测试内容,内容我是内容,测试内容,内容我是内容,测试内容,内容       我是内容,测试内容,内容我是内容,测试内容,内容我是内容,测试内容,内容       我是内容,测试内容,内容我是内容,测试内容,内容我是内容,测试内容,内容     </p>   </div>   <div class="demo2">     <p>       我是内容,测试内容,内容我是内容,测试内容,内容我是内容,测试内容,内容       我是内容,测试内容,内容我是内容,测试内容,内容我是内容,测试内容,内容       我是内容,测试内容,内容我是内容,测试内容,内容我是内容,测试内容,内容       我是内容,测试内容,内容我是内容,测试内容,内容我是内容,测试内容,内容     </p>   </div> </body> </html> 
赞(0) 打赏
未经允许不得转载:张拓的天空 » 使用CSS3的伪元素进行首字母下沉和首行改变样式
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏