是否有可能使用纯CSS实现这种舍入效果？

Question

是否可以使用纯CSS在下图中的暗区进行舍入？

Answer 1

绝对。只需创建一个DIV，并附加一个具有以下规则的类：

.rounded_box {
    width: 90px;
    height: 60px;
    border-top-left-radius: 11px 30px;
    border-bottom-left-radius: 11px 30px;
    background-color: #333333;
}

<div class="rounded_box"></div>

根据您正在寻找的浏览器支持，您可能需要为边界半径线添加一些其他特定于供应商的前缀。如：

-webkit-border-top-left-radius: 11px 30px;
-webkit-border-bottom-left-radius: 11px 30px;
-moz-border-radius-topleft: 11px 30px;
-moz-border-radius-bottomleft: 11px 30px;

Answer 2

是的http://www.css3.info/preview/rounded-border/是一个很棒的教程。

Answer 3

边界半径绝对是答案。看看这个方便的小网站，为您生成代码;

http://border-radius.com

另请注意，IE 6,7或8不支持