search

fezaoduke / fe-practice-hard

晚练课
69 stars 6 forks source link

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

Open wingmeng opened 5 years ago

wingmeng commented 5 years ago

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

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>