admin 管理员组文章数量: 1087139
2024年3月9日发(作者：openstack的组成有哪些)
HTML5+CSS3 文字阴影和阴影位移
text-shadow属性可以撑持给文字加上阴影，这样在设计时可以通过CSS 3设置增添文字的质感，而不用利用任何图片。
语法：
text-shadow ： 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
给文本添加阴影效果
已经添加阴影效果
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， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论