1

When using CSS3 border-radius property to create rounded corners how would one keep the content (text, images, etc.) from appearing over the top of the corner?

Example: Example

Might be hard to tell with this but I hope you guys understand the question.

4

2 回答 2

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;用于计算元素的宽度和高度，包括填充和可能的边框。

这是JSBin 演示

于 2013-08-28T21:07:37.907 回答
0

我不知道它是否可以在其他浏览器中使用，但在 Chrome 中您可以添加：

overflow: hidden;

到容器，这将修复它。这是一个jsfiddle 示例，说明了溢出的作用。

于 2013-08-28T21:01:45.400 回答