admin 管理员组

文章数量: 1086019


2024年3月9日发(作者：openstack的组成有哪些)

HTML5+CSS3 文字阴影和阴影位移

text-shadow属性可以撑持给文字加上阴影，这样在设计时可以通过CSS 3设置增添文字的质感，而不用利用任何图片。

语法：

text-shadow ： none | none | [, ] *

或者

text-shadow ：none | [, ]*

上述语法的参数含义如下：

color 指定颜色。

length 由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。

opacity 由浮点数字和单位标识符组成的长度值。不可为负值。指定模糊效果的作用距离。如果你仅仅需要模糊效果，将前两个length全部设定为0。

通过上述text-shadow属性，可以添加阴影。而最重要的阴影不能与文本内容相重叠，否则将无法显示出阴影效果。

因此，用户需要设置阴影的位移距离，即是阴影与文本内容之间的距离。

语法：

text-shadow：Apx Bpx #color；

其中，参数A值是指文本X轴上的位移；而B值指文本Y轴上的位移，color指阴影的颜色值。

提示：

px就是表示pixel，像素，是屏幕上显示数据的最基本的点。

例如，给

标签添加文字阴影，如：

h1 {text-shadow: 0.1em 0.1em #333;}

上述样式中，前面0.1em表示X轴的位移、而后面的0.1em表示Y轴值的位移，其颜色为#333。

提示：

em即％，在CSS中，1em＝100％，是一个比率，结合CSS继承关系使用，具有灵活性。em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

下面通过示例，来了解一下阴影效果。

示例：14-1

text-shadow设置阴影

给文本添加阴影效果

已经添加阴影效果

margin-top:35px;

font-family:"华文楷体";

font-weight:bold;

font-size:18px;

text-shadow:5em 5em #FFCC66;

text-shadow: 5px 5px #FF6600;

font-family:"黑体";

font-size:16px;

margin:20px 0px 0px 20px;

执行上述代码，用户可能看到网页中，已经显示的文本阴影效果。而针对不同的单位，其阴影显示的位置也不同。

阴影位移


本文标签： 阴影 文本 效果 显示 位移

版权声明：本文标题：HTML5+CSS3 文字阴影和阴影位移 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1709951591a550967.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。