[分享]css3在圆角矩形中添加文字

CSS3是CSS的进阶版，除了原本CSS的样式设定外，更推出了更多新的样式设定，像是为矩形与圆形加上圆角的设定，更能为HTML与CSS设定出更多样式的组合方式，让网页呈现更丰富的视觉效果。其中圆角矩形...

CSS3是CSS的进阶版，除了原本CSS的样式设定外，更推出了更多新的样式设定，像是为矩形与圆形加上圆角的设定，更能为HTML与CSS设定出更多样式的组合方式，让网页呈现更丰富的视觉效果。

其中圆角矩形是使用border-radius这个属性设置的。如下面代码所示：

.box {
  border-radius: 10px;
  background-color: #f0f0f0;
} 

此代码为一个class名叫.box的div块元素，利用border-radius属性来设定矩形圆角的半径，也就是圆角边角所涉及的部分。

接下来就要介绍如何在圆角矩形中添加文字了。在实现这个操作之前，需要清楚了解两个概念：overflow hidden 与 position absolute。

overflow hidden用于隐藏元素多出来的部分，而position absolute用于绝对定位一个元素，也就是让元素在其父元素中的位置固定，不会跟着父元素移动而产生变化。

以下是示例代码：

.box {
  position: relative;   /* 相对定位父元素 */
  width: 400px;
  height: 200px;
  border-radius: 10px;
  background-color: #f0f0f0;
}

.text {
  position: absolute;   /* 绝对定位子元素 */
  width: 300px;
  height: 100px;
  margin: auto;    /* 让子元素水平垂直对齐 */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;    /* 超过边框的部分隐藏 */
} 

以上代码，利用position属性让.text为子元素以绝对定位方式定位，width与height设定为想要的文字块元素大小，margin设定auto让textContent在div元素水平垂直居中，使用 top、bottom、left、right将div元素四方拉伸至覆盖整个父元素，overflow:hidden隐藏不必要的元素，让框子一样。

将文字放入div中，完成后效果图如下：

圆角矩形中的文字

希望这篇文章能够帮助你更好地理解CSS3技巧并应用到实际中。