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

响应圆形内部边界底部效果的div

1 个答案: