注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

秦时明月

做好今天的事!

 
 
 

日志

 
 
 
 

CSS3 文字描边  

2014-01-21 19:27:11|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

思路:

利用CSS3的text-shadow属性,对文字的四个边均用阴影。

实现代码:

HTML:

<div>文字描边效果</div>

CSS:

div{
text-shadow: 2px 0px 0px #000,
-2px 0px 0px #000,
0px 2px 0px #000,
0px -2px 0px #000;
}

text-shadow属性

语法:

text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*

相关属性 : 无

取值:
<color> :
指定颜色。
<length> :
由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。
<opacity> :
由浮点数字和单位标识符组成的长度值。不可为负值。 指定模糊效果的作用距离。如果你仅仅需要模糊效果,将前两个 length 全部设定为 0 。请参阅 长度单位。
说明:

设置或检索对象中文本的文字是否有阴影及模糊效果。可以设定多组效果,方式是用逗号隔开。可以被用于伪类 :first-letter 和 :first-line 。对应的脚本特性为 textShadow

 

兼容性:

text-shadow兼容除了IE系列的浏览器之外的Firefox3.5+以上的所有浏览器。。



CSS3 文字边框 -webkit-text-stroke  

CSS边框的一个不足就是只有矩形的元素才能使用。-webkit-text-stroke可以为文字添加边框。它不但可以设置文字边框的宽度,也能设置其颜色。而且,配合使用color: transparent属性,还可以创建镂空的字体!

h3 {
color: transparent;
-webkit-text-stroke: 4px red;
}

  评论这张
 
阅读(7)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017