CSS Button 圆角是指通过 CSS 样式使按钮的四个角呈现出圆弧形状。这种设计可以使按钮看起来更加柔和、友好,提升用户体验。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Button Rounded Corners</title>
<style>
.rounded-button {
padding: 10px 20px;
font-size: 16px;
color: white;
background-color: #007bff;
border: none;
border-radius: 10px; /* 固定半径圆角 */
cursor: pointer;
}
.custom-radius-button {
padding: 10px 20px;
font-size: 16px;
color: white;
background-color: #28a745;
border: none;
border-radius: 5px 15px 20px 10px; /* 不同半径圆角 */
cursor: pointer;
}
</style>
</head>
<body>
<button class="rounded-button">固定半径圆角按钮</button>
<button class="custom-radius-button">不同半径圆角按钮</button>
</body>
</html>
原因:不同浏览器对 CSS 的渲染可能存在差异,尤其是旧版本的浏览器。
解决方法:
-webkit-
, -moz-
)来支持旧版本的浏览器。.rounded-button {
padding: 10px 20px;
font-size: 16px;
color: white;
background-color: #007bff;
border: none;
border-radius: 10px;
-webkit-border-radius: 10px; /* Safari 和 Chrome */
-moz-border-radius: 10px; /* Firefox */
cursor: pointer;
}
通过以上方法,可以有效解决圆角按钮在不同浏览器上显示不一致的问题。