twitter-bootstrap - div的响应式圆形内部边框底部效果

Question

试图在这张图片上达到类似的效果：http: //i.imgur.com/zTkMou8.jpg div 内边框的圆边。可以用CSS来做吗？div 假设是充满响应的，所以最好有一些边框效果，根据 div 的大小可以更小或更大。

.image-container
{
border-bottom:#000 30px solid;
border-radius: 1em 4em 1em 4em;
border-bottom: 50px solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css" rel="stylesheet"/>



<div class="container image-container">
  
<img class="img-responsive" src="http://i.imgur.com/uqXZmk4.jpg" />
</div>

Answer 1

也许这可以为您指明正确的方向，因为我认为原始图片是在 Photoshop 中制作的...

尝试将其添加到 CSS 中的图像选择器中。您可以根据需要调整 PX。

CSS：

.image-container {
    background-color:black; }

.img-responsive{  width:100%;
-webkit-border-bottom-right-radius: 50px;
-webkit-border-bottom-left-radius: 50px;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; }

参见：jsfiddle