您当前位置:图趣网(Tuquu) >> 网页设计教程 >> 移动前端 >> 浏览设计教程

根据文字长度自动伸缩的网页标题

    用CSS样式实现文字阴影,只要需要改动文字,而且文字的金框背景随着文字的长度而自动变长梭短,也同样方便程序的对标题文字的编写。
原理就是通过用SPAN,将2个不同颜色的文字进行定位来表现出文字有阴影的效果

例子:

         
                   




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]
免责声明:本站文章系图趣网整理发布,如需转载,请注明出处,素材资料仅供个人学习与参考,请勿用于商业用途!
本文地址:http://www.tuquu.com/tutorial/wd1272.html
网页设计之CSS基线之道
网页前端让IE6,IE7,IE8支持CSS3的方法
图趣网微信
建议反馈
×