- A+
所属分类：Web前端
网页中常见的一种效果，首字改变样式或者首行改变样式，效果如下图。
代码：
<!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> 
