css中initial-letter属性如何实现首字下沉效果

这篇文章主要介绍css中initial-letter属性如何实现首字下沉效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

公司主营业务:成都网站设计、做网站、成都外贸网站建设公司、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联公司推出和布克赛尔蒙古免费做网站回馈大家。

    initial-letter属性里可以设置两个值:

    initial-letter:值1值2;

    值1:表示的行高;

    值2:表示沉度。

    这里我们就用简单的代码示例来看看效果:

    .raised-cap::first-letter{

    color:#bf4055;

    initial-letter:31;

    }

    .sunken-cap::first-letter{

    color:#bf4055;

    initial-letter:32;

    }

    .drop-cap::first-letter{

    color:#bf4055;

    initial-letter:3;

    }

    效果图:

    3.jpg

    是不是很方便简单,但很遗憾现在还有很多的浏览器不支持该属性,下面我们来看看哪些浏览器支持(绿色表支持):

    4.jpg

    虽然现在浏览器对该属性的支持度还是满天红色,但我们可以借助@supports来做一些降级处理,判断浏览器是否支持,从而实现首字下沉效果:

    //浏览器支持采用下面的方法

    @supports(initial-letter:5)or(-webkit-initial-letter:5){

    .intro:nth-of-type(1)::first-letter{

    -webkit-initial-letter:3;

    initial-letter:3;

    }

    }

    //浏览器不支持采用伪元素+浮动的方法

    @supports(not(initial-letter:5))and(not(-webkit-initial-letter:5)){

    .intro::first-letter{

    color:#bf4055;

    font-size:7.1875rem;

    float:left;

    line-height:.7;

    margin:17px2px00;

    }

    }


css中initial-letter属性如何实现首字下沉效果
 

以上是“css中initial-letter属性如何实现首字下沉效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


标题名称:css中initial-letter属性如何实现首字下沉效果
当前链接:http://scyanting.com/article/iipccd.html