css基础篇-倒影-阴影

一、倒影

语法

box-reflect：
	none | <direction> <offset>? <mask-box-image> ? <direction> = above | below | left | right <offset> = <length> | <percentage>
        <mask-box-image> =  none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

none：无倒影
above：指定倒影在对象的上边
below：指定倒影在对象的下边
left：指定倒影在对象的左边
right：指定倒影在对象的右边
<length>：用长度值来定义倒影与对象之间的间隔。可以为负值
<percentage>：用百分比来定义倒影与对象之间的间隔。可以为负值
none：无遮罩图像
<url>：使用绝对或相对地址指定遮罩图像。
<linear-gradient>：使用线性渐变创建遮罩图像。
<radial-gradient>：使用径向(放射性)渐变创建遮罩图像。
<repeating-linear-gradient>：使用重复的线性渐变创建背遮罩像。
<repeating-radial-gradient>：使用重复的径向(放射性)渐变创建遮罩图像

demo

// css
	img{
			/*
				倒影
				1、above 方向
				2、倒影与实像的记录距离
			*/
        -webkit-box-reflect: below -2px -webkit-linear-gradient(transparent,transparent 70%,rgba(0,0,0,.4));

    }

// html
<img src="girl.jpg" width="200" alt="">

效果

---

二、阴影

.box{
	height: 200px;
	width: 200px;
	background-color: red;
	/*前两个值代表x轴的位移 y轴位移  后一个值代表范围   第四个值代表阴影的颜色*/
	box-shadow: 20px 10px 20px blue,-20px -10px 20px green;
	text-shadow: 10px 10px 10px white,-20px -10px 10px yellow;
	font-size: 20px;
}

// html

<div class="box">
	<span>demo</span>
</div>

效果