【CSS3】 CSS3实现“图片阴影”效果

badlyForPapers

于 2016-02-24 00:06:40 发布

阅读量1.8w

点赞数 8

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/happyhaojie/article/details/50726284

学习前端有点类似于学习英语，很多东西需要一点点累积，下面讲解CSS3实现图片阴影效果。

1、效果展示:Shadow Effect这个块有阴影的效果，尤其是底边的曲线阴影非常明显，本文主要以“Shadow Effect”这个块进行讲解曲线阴影的效果。

2、结构编写：把大体的框架写好。

shadow.html:

<!DOCTYPE>
<html>
<head>
	<title>CSS3实现曲线阴影</title>
	<meta charset="utf-8">
	<link type="text/css"  rel="stylesheet"  href="css/style.css">
</head>
<body>
	<div class="wrap effect"><!-把阴影的效果写在effect类中，方便！->
		<h1>Shadow Effect</h1>
	</div>
</body>
</html>

style.css: