之前想用border-radius做圆弧可是做不了凹形的，所以找到用径向渐变创建 "图像"的方式来做：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px;
background:radial-gradient(220px 25px at top ,transparent 100%,blue 100%);
width:350px;
}
</style>
</head>
<body>
<div>border-radius属性</div>
</body>
</html>
可以直接用这个div去遮挡背景图片 形成下部份是圆陀状的感觉
<!DOCTYPE html>
<html>
<head>
<style>
.bg{
background:url('http://pic2.ooopic.com/12/40/58/18bOOOPIC9c.jpg');
width:350px;
height:350px;
position:relative;
}
.concave
{
text-align:center;
background:radial-gradient(200px 50px at top ,transparent 100%,white 100%);
width:350px;
height:50px;
position:absolute;
bottom:0px;
}
</style>
</head>
<body>
<div class="bg">
<div class="concave ">border-radius属性</div>
</div>
</body>
</html>
大概就这样，想必大家都看的懂吧
388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
