2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > CSS阴影属性-文字阴影 盒子阴影

CSS阴影属性-文字阴影 盒子阴影

时间:2020-02-20 15:27:08

相关推荐

CSS阴影属性-文字阴影 盒子阴影

文字阴影

在css3中通过text-shadow属性实现对页面中的文字添加阴影效果

语法格式

text-shadow:水平距离 垂直距离 阴影的模糊半径 阴影的颜色

其中水平距离和垂直距离为必填选项,通常使用像素值来设置,水平距离设置的值越大 阴影效果越靠右 垂直距离设置的值越大 阴影效果越靠下

阴影的模糊半径和阴影的颜色为选填项 其中阴影的颜色默认选项为该文字的颜色

即如果要设置阴影的文字的颜色为黑色,那么它的阴影颜色的默认值就是黑色

如上所示,阴影的颜色值采取的默认值 所以最终的效果是跟着文字的颜色来实现阴影效果

盒子背景

通常我们把div当作网页局部内容的容器,将其形象的比作盒子。盒子的阴影就相当于设置div这种的类似于文件夹的标签的阴影效果。要想实现盒子阴影的效果,需要使用到box-shadow方法

语法格式:

box-shadow:水平距离 垂直距离 模糊半径 阴影大小 阴影颜色

该方法的整体语法格式和用法与文字阴影方法差不多,相对于文字阴影的设置,它多了一个阴影大小

如图所示,设置了box-shadow中的所有参数 从左到右依次是水平距离 垂直距离 模糊半径 阴影大小 阴影颜色

盒子阴影的水平距离和垂直距离的用法和效果和文字阴影一样 值越大 水平距离越靠右 垂直距离越靠下

模糊半径可以理解为模糊的效果 类似于ps设置出来的羽化感 值越小 阴影的整体效果越显得钝化 值越大 整体的羽化效果越明显

模糊大小可以理解为最终效果的大小 即最终阴影的作用范围 值越大 阴影的范围越大

而盒子阴影的颜色和文字阴影的颜色不一样 它的默认值是黑色

如图所示 颜色值没设置,所以最终的效果是采取默认值黑色进行实现阴影的效果

水平距离和垂直距离都设置为0px 则表示最终的阴影效果围绕着整个内容的四周展开 2px表示设置的是阴影的最终羽化效果 200px表示阴影的最终作用范围 它不会改变阴影的最终羽化效果 只是在前面参数的基础上拓展整个阴影的范围

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。