是否有可能只用css，图像里面缩进

Question

是否可以仅使用CSS执行此操作？ 我想了很久但没有想到我的想法

Answer 1

是的，但前提是您的背景颜色为纯色：

div {
    width: 310px;
    height: 41px;
    background: gray;
    border-radius: 5px;
    position: relative;
}
div:after {
    content: '';
    display: block;
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    position: absolute;
    right: -30px;
    bottom: -30px;
}

同时检查DEMO。

编辑：添加了内部阴影：http://jsfiddle.net/LinkinTED/ThZrf/1/

Answer 2

是。你可以创建一个相对定位的div并给它一个高数字的边界半径（你必须试验找到它成为一个圆圈的位置）指定它的宽度和高度，将它的z-index设置为高于它坐在顶部的东西，并将它放在底角。像

这样的东西

#circle{
    border-radius: 300px;
    z-index: 2;
    height: 40px;
    width:40px;
    left: 350px;
    top: 20px;
    background-colour:white;
}

这些只是样本值。您需要自己的才能正确执行此操作。如果你想变得更加花哨，我想你可以指定应用半径的角落。所以你可以（我认为）在CSS中创建精确的形状，而不是我的方法可以做的圆（但是你将圆圈定位为仅切出角落）。

编辑：正如所指出的，如果你想要一个阴影，你可以玩css box-shadow属性（注意IE9下面不支持）。

Answer 3

在不知道您的特定用例的情况下，您可以考虑Lea Verou的这种技巧： http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/