首页 > 分享 > 正文

CSS: 文字阴影
2018-09-11 16:51:21   来源:   评论:0 点击:

CSS level 3 有一种属性叫做 "文字阴影, " 是用来为有些文字的每个字母加上阴影 在它最简单的形式里, 它看起来是像这样的:阴影文字效

CSS level 3 有一种属性叫做"文字阴影," 是用来为有些文字的每个字母加上阴影. 在它最简单的形式里, 它看起来是像这样的:

阴影文字效果

p{text-shadow: 0.1em 0.1em #333}
它增加了一个相对于正常文本有一点向右(0.1em)和向下(0.1em) 暗灰色(#333)的阴影. 

多重阴影

你可以有多于一个的阴影. 通常来说, 那看起来有些奇怪:


p {text-shadow: 0.2em 0.5em 0.1em #999,
      -0.3em 0.1em 0.1em #666,
      0.4em -0.3em 0.1em #333}

阴影文字效果


但当有2个放置适当的深色和浅色阴影时, 效果可能是很有帮助的,灰灰还是很喜欢这个效果的,用的较多:


p1 {text-shadow: -1px -1px white, 1px 1px #333}

p2{text-shadow: 1px 1px white, -1px -1px #444}

阴影文字效果

阴影文字效果




霓虹发光

如果你把一个模糊阴影放在文字的正后方, 像是偏距为0时, 其效果则是创造一个周围会发光的字母. 如果单一的阴影不够强烈, 那就重复同样的阴影几次:

p1 {text-shadow: 0 0 0.2em #999;color:#999}
p2 {text-shadow: 0 0 0.2em #ccc, 0 0 0.2em #ccc;color:#ccc}
p3 {text-shadow: 0 0 0.2em #888, 0 0 0.2em #888,0 0 0.2em #888;color:#888}

阴影文字效果

阴影文字效果

阴影文字效果







相关热词搜索:CSS 文字阴影

上一篇:网页设计师必备硬性技能
下一篇:phpcms v9增加文章随机点击数的方法

分享到: 收藏
这里空拉拉的一点都不好看,我加个这个盒子可能会好看些,只是可能啊!我觉得......
看了下还是不好看,那再加一个......
看了下还是不好看,以后在这价格留言功能什么的可能会好些......