CSS制作首字下沉效果

• W3Cplus

• MDN介绍

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

  
    
  
        
  
        
  
    
  
  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