争怎路由网:是一个主要分享无线路由器安装设置经验的网站,汇总WiFi常见问题的解决方法。

css3如何添加文字阴影效果?text-shadow设置文字阴影效果

时间:2024/2/17作者:未知来源:争怎路由网人气:

网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
阴影效果是一个常见也很实用的效果,相信有些朋友在使用阴影效果来美观网页页面时,有时会有一些疑问,比如:字体文字阴影是怎样设置的等等。那么本章就给大家谈谈css3是如何设置字体文字阴影的。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

其实在css3中有一个很实用的属性可以给字体文字添加阴影效果,那就是css3 text-shadow属性

那么,我们先来详细的看一看text-shadow属性:

text-shadow是CSS样式属性单词,是设置对象中文本的文字字体是否有阴影及模糊效果的CSS样式。

text-shadow属性:在CSS3中可以用text-shadow属性给页面上的文字添加阴影效果, 可以通过对text-shadow属性设置相关的属性值,来实现一些需要的字体阴影效果,减少了图片的使用。

text-shadow属性的语法:

text-shadow: h-shadow v-shadow blur color;

可以看出text-shadow属性可以设置4个参数,每个参数用空格隔开,下面我们来介绍一下这四个参数:

h-shadow: 设置水平阴影的位置(x轴方向),必需要设置的参数;允许负值。
v-shadow : 设置垂直阴影的位置(y轴方向),必需要设置的参数,允许负值。
blur: 阴影模糊的距离(半径大小),可选择设置的参数。
color : 阴影的颜色,可选择设置的参数。

注释:text-shadow 属性可以向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。

下面我们来看一个css3设置字体文字阴影的小例子,来具体的感知一下text-shadow属性的用法:

<h1>我是一段测试文字</h1>
h1{
   color:powderblue; /*设置文字颜色*/
   text-shadow: 2px 3px 1px pink;/*添加字体文字的阴影*/
}

效果图:

1.jpg

我们再来看看如果不设置css3文字阴影效果会是怎样的:

2.jpg

说明:

1、阴影的水平偏移量(h-shadow):可以取正值也可以取负值,如果值为正值,则阴影在对象的右边,反之其值为负值时,阴影在对象的左边。

2、阴影的垂直偏移量(v-shadow ):可以取正值也可以取负值,如果为正值,阴影在对象的底部,反之其值为负值时,阴影在对象的顶部。

3、阴影的模糊半径:只能设置为正值。如果值越大,阴影越模糊,反之阴影越清晰。如果其值为0时,表示阴影不具有模糊效果。

4、阴影的颜色:当没有指定颜色值的时候,浏览器会取默认色,但各浏览器默认色不一样,特别是在webkit内核下的safari和chrome浏览器将无色,也就是透明,建议不要省略此参数。

说到浏览器的默认色不一样,我们来看看text-shadow属性在各个浏览器中是否支持

浏览器的支持:

3.jpg

所有主流浏览器都支持 text-shadow 属性。

注:Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow 属性。

以上就是css3如何添加文字阴影效果?text-shadow设置文字阴影效果的详细内容,更多请关注php中文网其它相关文章!


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



关键词:css3如何添加文字阴影效果?text-shadow设置文字阴影效果




Copyright © 2012-2018 争怎路由网(http://www.zhengzen.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版