在 wordpress 博客 post 中添加圆角 div

Question

我正在尝试创建一个类似于 link 中的博客：http://www.wikihow.com/Grow-Flowers-from-Seed

每个步骤都有单独的部分，圆角，不同的背景颜色和居中对齐。

到目前为止我在 wordpress 中写的是：

<div style="width: 90%; background-color: #eaeaea;">
     <a href="http://prelaunch.biocarve.com/blog/wp-content/uploads/2015/12/670px-Grow-Flowers-from-Seed-Step-1.jpg"><img class=" size-medium wp-image-258 aligncenter" src="http://prelaunch.biocarve.com/blog/wp-content/uploads/2015/12/670px-Grow-Flowers-from-Seed-Step-1-300x225.jpg" alt="Grow Flowers From Seeds step1" width="450" /></a>
    <div style="width: 5%; padding: 0 10pt 0 0; float: left; background-color: #eaeaea;">
        <b>1</b>
    </div>
    <div class="step" style="width: 95%; padding: 0 10pt 0 0; float: left; background-color: #eaeaea;">
        <b class="whb">Choose a container.</b> There are a variety of inexpensive options available. Germinating flats are cheap and specifically created for the purpose of germinating seeds. Plastic drinking cups and recycled egg cartons are other inexpensive options, however. Small flower pots will also work.
    </div>
</div>

现在我得到的是这样的：请让我知道我哪里错了，我怎么也有圆角。

Answer 1

只需添加此 class 并将 class 传递给给定 <div> 即可为图像蒙上圆角

.roundedCorner{ 

  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;

}

在 wordpress 博客 post 中添加圆角 div

Add rounded corner div in wordpress blog post

html

wordpress

rounded-corners