使用border-radius时，内容显示在角上 [英] Content appears over a corner when using border-radius

问题描述

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

示例：

$ b

解决方案

可能难以告诉这个问题，但我希望你们能理解这个问题。要保持框内的内容，你可以使用 padding 属性：

  .box {
 width：400px; 
 height：250px; 
 background-color：gold; 
 
 border-radius：20px; 
 padding：5px; / *或* / 
 / * padding-left：10px * / 
 
 -webkit-box-sizing：border-box; 
 -moz-box-sizing：border-box; 
 box-sizing：border-box; 
} 
  

box-sizing：border-box; 用于计算<包含填充和可能的边框的元素的 width 和 height 。

以下是 JSBin演示

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:

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

解决方案

To keep the content inside of the box, you could use padding property:

.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; is used to to calculate width and height of the element including padding and probable border.

Here is the JSBin Demo

这篇关于使用border-radius时，内容显示在角上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！