6KBBS门户站长频道业界新闻网站运营网络编程站长资源社区论坛
当前位置: 6kbbs V8.0 官方论坛 » 网络编程 » CSS实验室:根据文字长度自动伸缩的标题
CSS实验室:根据文字长度自动伸缩的标题

用CSS样式实现文字阴影,只要需要改动文字,而且文字的金框背景随着文字的长度而自动变长梭短,也同样方便程序的对标题文字的编写。

原理就是通过用SPAN,将2个不同颜色的文字进行定位来表现出文字有阴影的效果

例子:

《div class=“mber_mainTitle”》

《!-- 标题的背景 --》

《span class=“box”》

《!-- 一般文字 --》

《span class=“text”》DIV+CSS实验室《/span》

《!-- 阴影用的文字 --》

《span class=“shadow”》DIV+CSS实验室《/span》

《/span》

《/div》

CSS 样式:

.mber_mainTitle{ height:27px; background:url(images/member/mber_mainTitle.jpg);}

.mber_mainTitle .box{ position:absolute; height:20px;padding:7px 20px 0 20px; background:url(images/member/mber_mainTitleText.jpg); font:bold 12px “宋体”; color:#48372d; margin-left:1px;}

.mber_mainTitle .text{ position:relative; color:#fff; left:1px; top:1px;}

.mber_mainTitle .shadow{ position:absolute; color:#48372d; left:20px;}

本文由 wzzjason 原创,转载请保留此信息,多谢合作。

推荐资讯
热文排行