让我们先看一下一些基本的CSS按钮样式代码，这将是我们在接下来的代码中使用的基准样式。
button {background-color: #4CAF50; /* Green */border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;}现在，我们想要使按钮呈现出更加圆润的外观，而不是方形的外观。为此，我们可以使用border-radius属性。border-radius属性允许我们向一个元素的外边缘添加圆角。
下面是一些示例代码，演示如何使用border-radius属性来添加圆角：
/* 圆角按钮 */.button-rounded {border-radius: 20px;}/* 左上、右下圆角按钮 */.button-rounded-topleft-bottomright {border-top-left-radius: 20px;border-bottom-right-radius: 20px;}/* 底部圆角按钮 */.button-rounded-bottom {border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}在这里，我们使用了border-radius属性，通过指定一个半径值，我们可以让按钮呈现出圆润的外观。在第一个例子中，我们指定了一个“20px”的半径值，这将使按钮变得更加圆润。在第二个例子中，我们使用不同的半径值为按钮的两个相对角添加不同的圆角。在第三个例子中，我们只向按钮的底部添加圆角，因此按钮的其他边缘将保持方形。
通过使用border-radius属性，我们可以轻松地为我们的按钮添加圆角效果。这个简单的步骤可以让我们的按钮看起来更加现代和现代化。
上一篇：javascript中两个定时器函数
下一篇：css挑战成功特效
