使用border-radius时，内容显示在角落

Question

当使用CSS3 border-radius属性创建圆角时，如何保持内容（文本，图像等）不会出现在角落的顶部？

示例：

可能很难说清楚，但我希望你们能理解这个问题。

Answer 1

要将内容保留在框内，您可以使用padding属性：

.box {
  width: 400px;
  height: 250px;
  background-color: gold;

  border-radius: 20px;
  padding: 5px;  /* or */
                 /* padding-left: 10px */

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

box-sizing: border-box;用于计算元素的 width 和 height ，包括 padding 和可能的 border

以下是 JSBin Demo

Answer 2

我不知道它是否适用于其他浏览器，但在Chrome中您只需添加：

overflow: hidden;

到容器，这将解决它。 这是溢出的jsfiddle example。