<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
background-color: #eaf0f2
}
h1{text-align: center}
.box{width:500pxheight:300pxmargin:0 autoposition:relative}
.img-layer{position: absolutewidth: 500pxheight: 300pxtop: 0left: 0overflow: hidden}
.img-layer img {width: 500pxcursor: pointer}
.img-layer:before{ content: ''
position: absolute
top: 0
right: 0
width: 0
height: 0
border-style: solid
border-width: 0
border-color: rgba(0,0,0,0.2) #fff
border-radius: 0 0 0 4px
box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2)
-webkit-transition: all 0.4s ease-out
transition:all 0.4s ease-out}
.img-layer:hover:before{
border-right-width:100px
border-bottom-width:100px
}
</style>
</head>
<body>
<h1>折角效果</h1>
<div class="box">
<div class="img-layer">
<img src="<a href="http://p6.qhimg.com/d/inn/3f563406/table.jpg">http://p6.qhimg.com/d/inn/3f563406/table.jpg</a>" alt="">
</div>
</div>
</body>
</html>
来源于网络
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：
div{width: 300pxheight: 150pxborder: 3px solid blueborder-radius: 0 0 30px 30pxbox-shadow: 0 7px 7px -7px #5E5E5E}
3、浏览器运行index.html页面，此时实现了div只有底部有圆角和阴影效果。
1、css圆角实现的方式有很多种，最简单最方便的是使用border-radius属性。或者使用圆角图片。
2、border-radius后面直接接数值。
3、图片圆角就是事先切除圆角图片，可以制作定高，或者定宽的div。
4、使用border-radius的优点是无序添加多余结构代码，但是对于低版本的浏览器支持有问题。使用图片圆角不会有兼容问题，但是会多出多余的代码和结构。
