• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

CSS制作首字下沉

CSS3 web前端中文站 3年前 (2017-04-18) 1087次浏览 已收录 0个评论

CSS Inline Layout Moduleinitial-letterCSS3

在杂志排版中,常常能看到首字下沉的效果。

CSS 制作首字下沉

在 Web 的排版中,也常常能看到上图这样的效果。并且常常看到的是首段首字下沉。那么今天这篇文章咱们来聊聊如何使用 CSS 实现首字下沉效果。

::first-letter 实现首字下沉效果

早期中,实现首字下沉都是能过伪元素::first-letter来实现。其实现原重非常的简单,就是把首字font-size值设置较大,然后能过float来实现。比如:

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

上面这段代码将会把所有段落的首字下沉,如果仅需要对首段首字下沉,那还需要配合其它的选择器来实现。

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

Initial-Letter

前面看到的效果是老式的 CSS 实现的首字下沉效果。虽然是实现了,但借助float还是存在一定的缺陷,而且灵活度也并不强。不过值得庆幸的是,在 CSS Inline Layout Module Level 3 提供了一个新的思路和方案:采用initial-letter

这个新属性能非常轻易的帮且我们实现首字下沉的效果,但他只能运用于块容器首行首字。同样需要配合::first-letter一起使用。比如:

.intro::first-letter {     
initial-letter: 7; } 

得到的效果如下图所示:

CSS 制作首字下沉

initial-letter有一个非常灵活之处,它接受两个值:

initial-letter: 3 3 

第一个值表示的行高,第二个表示沉度。将前面的示例换换:

.raised-cap::first-letter {     
initial-letter: 3 1; }  
.sunken-cap::first-letter {     
initial-letter: 3 2; }  
.drop-cap::first-letter {     
initial-letter: 3; } 

最终得到的效果如下:

CSS 制作首字下沉

再来看看浏览器目前对initial-letter属性的支持力度。大家或许会很失望,但不用过于担心,我想不需要过多久浏览器会很快就对该属性支持。

虽然浏览器对该属性支持度还是满天红色,但我们可以借助早前介绍的@supports来做一些降级处理:

// 浏览器不支持采用以前的方案 
@supports (not(initial-letter: 5)) and (not(-webkit-initial-letter: 5)) {     
.intro::first-letter {         
color:  hsl(350, 50%, 50%);         
font-size: $cap-size;         
float: left;         
line-height: .7;         
margin: 17px 2px 0 0;     } } 
// 支持的浏览器采用下面的方案 
@supports (initial-letter: 5) or (-webkit-initial-letter: 5) {     
.intro:nth-of-type(1)::first-letter {         
initial-letter: 3;     } } 

效果如下:

总结

文章简单介绍了如何使用 CSS 实现首字下沉效果。特别是 CSS Inline Layout Module Level 3 新模块中提供的initial-letter属性。该属性能更灵活的实现首字下沉效果。这篇文章只是简单的介绍了initial-letter属性,但该模块还提供了其它的一些属性,比如initial-letter-aligninitial-letter-wrap。后面将花一个篇幅来介绍整个模块中相关属性的使用。


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:CSS 制作首字下沉
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址