前端学习笔记 - CSS - 1.阴影

前端学习笔记-CSS-1

阴影：box-shadw

shadw属性有四个参数：水平偏移，垂直偏移，模糊范围半径，阴影颜色。

1. 水平偏移

<style type="text/css">
    .box1{
		width: 100px;
		height: 100px;
		background: #00FFFF;
		box-shadow:20px 0 0 black;
	}
</style>

2.垂直偏移

<style type="text/css">
    .box1{
		width: 100px;
		height: 100px;
		background: #00FFFF;
		box-shadow: 0 20px 0 black;
	}
</style>

3.模糊范围半径

<style type="text/css">
   .box1{
   	width: 100px;
   	height: 100px;
   	background: #00FFFF;
   	box-shadow: 20px 20px 20px black;
   }
</style>

4. 阴影颜色

<style type="text/css">
   .box1{
   	width: 100px;
   	height: 100px;
   	background: #00FFFF;
   	box-shadow: 20px 20px 0 black;
   }
</style>