:after 伪类
position 定位
border-radius 圆角边框
linear-gradient 背景颜色渐变
display: flex flex 布局
box-shadow 盒子阴影
1.可以直接使用border-radius:0 0 15px 15px这些数据中,依次为顶部左角,顶部右角,底部右角,底部左角。示例一下:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.test{
width:100px
height:100px
background:#cecece
border-radius:0 0 15px 15px
}
</style>
</head>
<body>
<div class="test">
</div>
</body>
</html>
效果如下:
2.可以分别使用border-bottom-left-radius:15pxborder-bottom-right-radius:15px具有同样效果.
给div加个样式,设置-webkit-border-radius,-moz-border-radius,border-radius,就可以实现圆角了,但是有一个问题就是IE8及一下是没有效果的