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

CSS3圆角矩形是一种很常用的样式效果，很多网页都会用到。在圆角矩形上添加文字也是一个很实用的功能，这篇文章将会介绍如何使用CSS3圆角矩形添加文字。.rounded { width: 200px; ...

CSS3圆角矩形是一种很常用的样式效果，很多网页都会用到。在圆角矩形上添加文字也是一个很实用的功能，这篇文章将会介绍如何使用CSS3圆角矩形添加文字。

.rounded {
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  border-radius: 10px;
  padding: 20px;
} 

首先，我们需要创建一个CSS3圆角矩形的样式。在上面的代码中，我们设置了一个200x100像素的元素，并给它一个灰色的背景。border-radius属性设置了元素的圆角半径为10像素，padding属性设置了文字与元素边缘的距离为20像素。

<div class="rounded">
  <p>这是一个圆角矩形</p>
</div> 

接下来，在HTML中添加一个包含文字的元素，将其包裹在上面创建的.rounded类中。如上所示，在元素内部添加了一个p标签，用于展示文字。

现在，我们已经成功地创建了一个CSS3圆角矩形，并且在里面添加了文字。现在我们可以根据需要改变背景颜色、字体大小、字体颜色等样式属性，让圆角矩形与网页整体风格更协调。