web前端入门——CSS3文本阴影、边框阴影

文本阴影——text-shadow

文本阴影:
	text-shadow: h-shadow v-shadow blur color;
	text-shadow: 水平阴影 垂直阴影 模糊度 颜色;
	
多层文本阴影的设置:
	text-shadow:第一层阴影,第二层阴影,第三层阴影;

h-shadow(必需)

水平阴影的位置，允许负值

	text-shadow: 5px 0px 0px rgba(255, 0, 0, 0.9);

在这里插入图片描述

v-shadow(必需)

垂直阴影的位置，允许负值

	text-shadow: 0px 5px 0px rgba(255, 0, 0, 0.9);

在这里插入图片描述

blur(可选)

模糊的距离

	text-shadow: 0px 0px 5px rgba(255, 0, 0, 0.9);

在这里插入图片描述

多层文本阴影

	text-shadow: -5px -5px 5px rgba(255, 0, 0, 0.9),5px 5px 5px rgba(0, 255, 0, 0.9),5px 0px 5px rgba(0, 0, 255, 0.9);

在这里插入图片描述

color(可选)

阴影的颜色

    text-shadow: 5px 5px 5px rgba(0, 255, 0, 0.9);

在这里插入图片描述

边框阴影——box-shadow

边框阴影:
	box-shadow: h-shadow v-shadow blur spread color inset;
	box-shadow: 水平阴影 垂直阴影 模糊度 阴影大小 颜色 内外阴影(可选);
		默认影子在外面(忽略不写)
		设置影子在内部( inset )
			
多层文本阴影的设置:
	box-shadow:第一层阴影,第二层阴影,第三层阴影;

h-shadow(必需)

水平阴影的位置，允许负值

    box-shadow: 5px 0px 0px 0px rgba(255, 0, 0, 0.9);

在这里插入图片描述

v-shadow(必需)

垂直阴影的位置，允许负值

    box-shadow: 0px 5px 0px 0px rgba(255, 0, 0, 0.9);

在这里插入图片描述

blur(可选)

模糊距离

    box-shadow: 5px 5px 5px 0px rgba(255, 0, 0, 0.9);

在这里插入图片描述

spread(可选)

阴影的大小

    box-shadow: 5px 5px 5px 5px rgba(255, 0, 0, 0.9);

在这里插入图片描述

color(可选)

阴影的颜色

    box-shadow: 5px 5px 5px 5px rgba(0, 255, 0, 0.9);

在这里插入图片描述

inset(可选)

从外层的阴影（开始时）改变阴影内侧阴影

    box-shadow: 5px 5px 5px 5px rgba(0, 255, 0, 0.9) inset;

在这里插入图片描述

多层文本阴影

	box-shadow: 5px 5px 5px 0px rgba(255, 0, 0, 0.9),10px 10px 5px 0px rgba(0, 255, 0, 0.9),15px 15px 5px 0px rgba(0, 0, 255, 0.9);

在这里插入图片描述