CSS制作首字下沉效果

  • W3Cplus

  • MDN介绍

  • first-children-MDN:父元素的第一个子元素

    <body>
  <div class="main">
      <div class="main_items"></div>
      <div class="main_items"></div>
  </div>
</body>
css部分:
  .main_items:first-child{
          top:-50px;
          left:-50px;
      }
      .main_items:last-child{
          bottom:-50px;
          right:-50px;
      }

两种种方法：

  • 利用伪元素::first-letter然后float
    1）所有段落首字下沉

    p::first-letter { 
      color: #c69c6d; 
      float: left; 
      font-size: 5em; 
      margin: 0 .2em 0 0; 
    }
p {clear:both;} /*清除首字的浮动，避免影响p标签的高度与其相叠加*/

2）首段首字下沉

 p:first-children::first-letter{
      color: #c69c6d; 
      float: left; 
      font-size: 5em; 
      margin: 0 .2em 0 0; 
    }

  • 利用initial-letter属性:需要配合first-letter一起使用

      p::first-letter { 
     color: #c69c6d;
     initial-letter:3 1;/*第一个表示行高，第二个表示沉度*/
   }
sunken-raised-drop-caps.jpg
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容