Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

第 97 期(W3C 标准-CSS-布局排版):首字下沉效果 #100

Copy link
Copy link
@wingmeng

Description

@wingmeng
Issue body actions

我们经常会在报纸或杂志上看到首字下沉的效果,也就是第一段开头的第一个字非常醒目:

image

那在网页中我们如何实现这种效果呢?

.section {
  font-size: 14px;
  line-height: 1.6;
}

/* 这里用到了 first-letter 伪元素 */
.section::first-letter {
  float: left;
  margin-right: 5px;
  line-height: 1;
  font-size: calc(1em * 1.6 * 2);  /* 下沉2行 */
  color: #c33;  /* 还可以修改首字颜色 */
}
<p class="section">是谁击沉了那幻想的扁舟?是谁唤醒了梦中的弱者?是谁暗埋了恨的种子?是你赐它以永恒的沉默,是你以泪光驱散了迷茫,指引梦中的方向,“恨”的花蕾悄悄绽放,沉默的巨轮浮在花朵中央,它将载着你所有的沉默……</p>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Morty Proxy This is a proxified and sanitized view of the page, visit original site.