倾斜加阴影

今天来讲一个给图片设置倾斜加阴影的一个小案例。

       如下图:

 

                   

1.第一步，老样子先创建一个div文档，再在一个div下放置一个背景为图片的div（因为这个案例要用到的CSS样式不多，所以不需要再额外创建一个CSS，直接写在style标签下即可）。   

           

 

接下来是本篇文章的重点，transform属性和box-shadow属性

transform属性向元素应用2D或3D转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜

box-shadow属性向框添加一个或多个阴影，该属性是由逗号分隔的阴影列表，每个阴影由2-4个长度值、可选的颜色以及可选的inset关键词来规定，省略长度的值是0

2.为div设置宽和高以及背景图片，再为它添加transform属性和box-shadow属性。

如下图：

             

 

 

                

这样一个倾斜加阴影的小案例就做好了，如果没有出现效果的话，就仔细检查一下如果实在找不到错在哪，就删了重写。