CSS的文本属性阴影效果

文本属性

在网页设计中，一些特殊的效果能给网页增加不一样的视觉体验，给人焕然一新的感觉，更加吸引群众。例如：

1.给文字增加阴影效果

给文本添加阴影

#mydiv2{
				font-size: 30px;
				text-shadow:0px 6px 5px red ;
			}

如图所示：text-shadow的四个数值属性依次是： x:左右距离 y：上下距离 焦距：距离越远越模糊 颜色

2.给图片增加阴影

img{
				/*给元素添加阴影*/
				box-shadow: 4px 5px 5px rgb(100,100,100);
			}

代码中的rgb(x,y,z) rgba(x,y,z, 1以内的小数) 其中rgba的最后的小数表示透明度,值越小越透明。rgb中的r（red 红），g（green 绿），b（blue 蓝），数值代表各个色的显示亮度，取值在0-255之间。
如图所示：左边的阴影部分显现出来的层次感。

以及鼠标悬浮在上面也可以出现阴影效果：

img.myshadow:hover{
				box-shadow: 0px 12px 30px  rgba(0,0,0,0.9);
				transition: all 0.5s linear;/*综合属性*/
			}

如图所示为鼠标悬浮在图片上之后的效果，四周都出现了阴影。