CSS3文本阴影、盒子阴影
在我们平时写页面时会遇到一些元素有阴影,内容有阴影的页面效果,对于初学者来说可能会用一些背景图或者定位来解决其中一部分阴影效果,但是并不能解决全部,本篇文章给大家介绍一下CSS3文本阴影、盒子阴影以方便以后遇到阴影效果多一种解决办法。
在css3里面文本阴影和盒子阴影都是有多个属性值得,每个属性值代表的意思都是不同的,可设置的值也是不同的
首先介绍的是文本阴影属性text-shadow:
文本阴影的写法
text-shadow:20px 20px 20px burlywood;
text-shadow第一个值
在text-shadow属性里第一个值代表的是水平方向的距离,这个值是必须有的而且支持负值
当我们改变第一个值得大小时为正值时阴影会向右发生移动
为负值时阴影会向左发生移动
text-shadow第二个值
在text-shadow属性里第二个值代表的是垂直方向的距离,这个值是必须有的而且支持负值
当我们改变第二个值得大小时为正值时阴影会向下发生移动
为负值时阴影会向上发生移动
text-shadow第三个值
在text-shadow属性里第三个值代表的是设置阴影清晰和模糊程度的值,这个值不支持负值
当我们改变第三个值得大小发生改变时阴影会随着值得大小显示模糊程度
注意,此值不能为负值当为负值时,text-shadow属性就会出现问题不显示了
text-shadow第四个值
在text-shadow属性里第四个值代表的是设置阴影颜色的值,这个值支持英文单词和#的写法
当我们改变第四个值的属性值时阴影的颜色会随着我们设置的颜色来显示
特别强调:第一个值和第二个值得位置不能互换;
书写多个文本阴影:
当给同一个文字设置多个阴影的时候,阴影和阴影之间用逗号隔开:
如:text-shadow:0 0 4px white,0 -5px 4px #ff3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;
再次说明:水平、垂直阴影的位置允许负值,可进行多阴影设置(逗号分隔的方式)
盒子阴影属性box-shadow
box-shadow写法
box-shadow: 10px 10px 10px 10px greenyellow;
box-shadow第一个值
box-shadow的第一个值和文本属性的第一个值所代表的定义是一样的
当我们改变第一个值得大小时为正值时阴影会向右发生移动
为负值是会向左移动
box-shadow第二个值
box-shadow的第二个值和文本属性的第二个值所代表的定义也是一样的
当我们改变第二个值得大小时为正值时阴影会向下发生移动
为负值是会向上移动
box-shadow第三个值
box-shadow的第三个值和文本属性的第三个值所代表的定义也是一样的
当我们改变第三个值得大小发生改变时阴影会随着值得大小显示模糊程度(此值不可为负值)
box-shadow第四个值
box-shadow是有5个值的,第四个值代表的是盒子阴影区域的大小,第五个值代表的才是阴影颜色
当我们改变第四个值的时候盒子阴影区域会随着我们的改变,而变换大小
此值可以存在负值,如果负值过小,会被盒子盖在下面
box-shadow第五个值
box-shadow第5个值会随着我们设置的颜色来改变
box-shadow还有个inset值,这个值是设置阴影显示区域的,表示的是在内测显示,默认识外侧显示
内测显示时默认会从上方显示,刚好和外侧相反,此时我们把水平和垂直方向的值改为负值就可以使阴影在下方显示
同文本阴影当给一个盒子设置多个阴影的时候,阴影和阴影之间用逗号隔开:
box-shadow: 10px 10px 5px 10px #888888 inset,10px 10px 5px 10px #888888 inset,10px 10px 5px 10px #888888 inset;