当前位置:jQuery学习 > css > CSS 实现首字下沉效果

CSS 实现首字下沉效果

时间:2010-11-21QQ群:116983258

大家可能已经见过首字下沉效果了,尤其是使用WordPress的朋友,今天就让我们看看使用CSS来实现这一效果。是的,我们不会使用到js代码,仅使用简单的CSS样式就能实现这一效果,效果如下:

CSS首字下沉效果

CSS代码如下,可以根据自己的需要来进行修改。

.dropcap {
    font-family:Verdana;
    color: #ccc;
    font-size: 42px;
    float: left;
    font-weight:bold;
    margin-right:5px;
    line-height: 1em;
    position: relative;
}

这样,我们使用时只需将首字样式名设置为dropcap,就实现了我们的效果。

<span class="dropcap">W</span>
作者:jQuery学习
除非注明,jQuery学习网文章均为原创,转载时必须以链接形式标明本文地址。
本文地址:http://www.jquery001.com/use-css-to-fulfill-drop-caps.html

所有话题