前端学习笔记 - 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>

前端学习笔记 - CSS - 1.阴影_第1张图片
2.垂直偏移

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

前端学习笔记 - CSS - 1.阴影_第2张图片
3.模糊范围半径

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

前端学习笔记 - CSS - 1.阴影_第3张图片

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

前端学习笔记 - CSS - 1.阴影_第4张图片

你可能感兴趣的:(前端,css,web开发)