文章/答案/技术大牛

发布

css按钮圆角矩形

CSS按钮圆角矩形基础概念

CSS按钮圆角矩形是指通过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 {
            background-color: #4CAF50; /* 按钮背景颜色 */
            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: 12px; /* 圆角半径 */
        }

        .rounded-button:hover {
            background-color: #45a049; /* 鼠标悬停时的背景颜色 */
        }
    </style>
</head>
<body>

<button class="rounded-button">Click Me!</button>

</body>
</html>

参考链接

MDN Web Docs - CSS border-radius

常见问题及解决方法

问题：为什么按钮圆角不明显？

原因：可能是圆角半径设置得太小，或者背景颜色和边框颜色相近，导致视觉上不明显。

解决方法：增加圆角半径，或者调整背景颜色和边框颜色，使其对比度更高。

.rounded-button {
    border-radius: 20px; /* 增加圆角半径 */
    background-color: #FF5733; /* 调整背景颜色 */
    border: 2px solid #FFC300; /* 添加边框并调整颜色 */
}

问题：按钮在不同设备上显示不一致？

原因：可能是由于不同设备的屏幕分辨率和像素密度不同，导致显示效果不一致。

解决方法：使用相对单位（如em、rem）来设置按钮的大小和圆角半径，或者使用CSS媒体查询来针对不同设备进行样式调整。

.rounded-button {
    border-radius: 2rem; /* 使用相对单位 */
}

@media (max-width: 600px) {
    .rounded-button {
        padding: 10px 20px; /* 针对小屏幕调整内边距 */
    }
}

通过以上方法，可以有效解决CSS按钮圆角矩形设计中常见的问题，提升用户体验和界面美观性。

页面内容是否对你有帮助？

有帮助

没帮助

创建具有不同图像和CSS的按钮

css、image、performance、button、css-sprites

我想创建一些按钮，看起来有点像这样。现在您可以看到，所有按钮共享相同的背景，圆角矩形，以及一些不同的图片和文本。那么，我应该只制作一个包含所有按钮的巨大spritemap，还是创建一个带有圆角矩形背景图片的链接，然后使用CSS将图像和文本放在里面会更好(为了性能)？

浏览 2提问于2013-12-02得票数 0

2回答

具有背景和增加的and键区域的UIButton

ios、swift、uibutton、swift4

我想有一个小的圆角UIButton与背景。但增加了but键区域背景不是图像，而是背景颜色+ layer.cornerRadius。我知道如何设置按钮背景和圆角。如有任何建议，我们将不胜感激

浏览 1提问于2018-10-07得票数 0

2回答

可扩展的非矩形CSS按钮？

css、html

在网上摸索了很久之后，我发现了很多关于使用CSS来设计提交按钮样式的建议和示例，但它们都会生成矩形按钮。我想做一个自动调整大小以适合按钮图例的非矩形按钮。具体来说，我希望按钮看起来像这样(加上或减去圆角)：有什么建议吗？

浏览 1提问于2012-12-26得票数 3

回答已采纳

5回答

避免CSS边界半径中的椭圆形状

html、css

矩形div使用边框半径CSS生成椭圆角而不是圆角。我怎样才能得到完美的圆角矩形div？

浏览 3提问于2015-07-24得票数 51

回答已采纳

1回答

阅读多个圆角矩形按钮的文本

cocoa-touch

我正在创建一个UIView，其中将包含超过26个圆形矩形按钮。我使用的是一个名为NSString的标题。我想设置选定圆角矩形按钮的Title=text。我不能在这里使用switch方法，因为它应该在单个圆形矩形按钮的可能值超过26个的情况下使用。我可以通过创建26个以上的方法(每个圆形矩形按钮一个)来实现，但我不想这么做。我只想使用一个方法，它将执行以下操作 “所选圆角矩形”按钮的

浏览 6提问于2011-05-18得票数 0

1回答

跨浏览器剪辑掩码

cross-browser、css、mask、image-clipping

我的网站有导航功能，显示为带有圆角的直角按钮列表。设置“溢出:隐藏；”不工作，因为裁剪区域是简单的矩形没有圆角。CSS属性，如下面所示，可以在Webkit浏览器下工作，但不适用于Firef

浏览 1提问于2011-02-15得票数 3

1回答

按钮内边距有圆角的步骤

html、css、twitter-bootstrap

我有一个圆角边框的引导按钮。我想使按钮内部的边框圆角，而不是一个矩形。<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button> CSS：

浏览 10提问于2017-08-03得票数 0

回答已采纳

2回答

自定义UIButton图像按钮类型

iphone、objective-c、ipad、uikit

如果你可以设置一个按钮的图像，即使它的按钮类型是圆角矩形，那么按钮类型开始的目的是什么？我通常使用自定义按钮类型，但这真的有区别吗？

浏览 2提问于2012-08-06得票数 3

回答已采纳

2回答

在界面生成器中将圆角矩形按钮更改为无弯角的矩形按钮

cocoa-touch、ios、interface-builder、uibutton

通常，当你插入一个按钮时，它的设置是一个圆角矩形按钮。如何将圆角矩形按钮更改为矩形按钮？就像我不想要按钮的弧形角落，只是像矩形一样的普通尖角？希望有人能帮我回答这个简单的问题，谢谢

浏览 6提问于2011-03-08得票数 1

回答已采纳

8回答

“导航项中不支持普通样式”警告:我的自定义栏按钮项

iphone、ios、xcode、uibarbuttonitem、uibarbuttonitemstyle

我将一个圆角矩形按钮拖到右侧栏按钮项的位置，并将图像设置为圆角矩形按钮。除了警告“导航项目中不支持普通样式”之外，所有这些都工作正常。我用圆角矩形按钮定制了许多条形按钮项，有时Xcode4.2只在条形按钮项上显示一个警告，有时在所有条形按钮项上显示警告。

浏览 5提问于2012-06-08得票数 93

回答已采纳

2回答

如何用微调器替换圆形矩形按钮中的文本？

objective-c、xcode4、uibutton

我有一个带有通用圆角矩形按钮的视图，它可以连接到另一个视图。当用户按下四舍五入的矩形时，它会启动一个抓取操作。我想有一个旋转的轮子替换文本(“下一步”)内的圆角矩形按钮，而提取是处理。initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];但我不知道如何让它替换圆角矩形按钮中的文本

浏览 0提问于2012-07-08得票数 4

回答已采纳

5回答

我在弹出窗口中添加了一个UIButton作为subView，但我无法让它半透明地显示出来。弹出窗口的主视图的背景是半透明的，但这个UIButton保持完全不透明。有人能告诉我为什么下面的代码不能工作吗？谢谢。 checkButton.frame = CGRectMake(187, 288, 30, 30); [checkButton setTitle:@"?" forState:UIControlStateNo

浏览 2提问于2011-07-09得票数 3

回答已采纳

3回答

我的按钮上有个阴影

iphone、objective-c、ios

我正在以编程方式为iPad应用程序创建一个按钮。当我看到按钮时，它下面似乎有一个阴影类型的东西。它是什么?我怎样才能摆脱它？顶部的测试按钮是视图的子视图。底部按钮是滚动视图的子视图，滚动视图是视图的子视图( button /view vs button/ scrollview / view )。

浏览 2提问于2011-11-30得票数 6

回答已采纳

1回答

边缘为圆角的空按钮

ios、cocoa-touch、uibutton、uikit

我想知道我是否可以在Xcode中制作一个按钮，它只是一种圆角矩形，里面没有任何东西，这样背景图像就会显示在按钮上，但我需要圆角的矩形线条。

浏览 1提问于2012-10-28得票数 0

1回答

Flex中按钮的圆角

apache-flex、rounded-corners

我想让按钮的特定角变圆，以创建类似mx.controls.ButtonBar的东西。但我无法理解ButtonBar是如何做到这一点的，即使看了它的源码。我以为focusRoundedCorners css属性就是答案，但它只适用于绘制按钮的焦点框。任何关于这方面的想法都将不胜感激！

浏览 0提问于2010-07-06得票数 2

回答已采纳

4回答

UIButtonTypeRoundedRect类型的UIButtons的着色

iphone、objective-c、cocoa-touch、colors、uibutton

我希望UIButton主题类型的圆角矩形部分是我指定的纯色自定义颜色。我能理解问题是如何更改圆角矩形部分的颜色。我尝试过setImage，但图像必须有圆角，并且当按钮改变大小时没有任何价值。

浏览 1提问于2010-01-19得票数 4

1回答

如何删除在css中保留输入按钮时的蓝色高亮显示？

html、css

我正在制作一个移动应用程序，当我使用chrome浏览器在安卓手机上查看它时，按住输入按钮(如果这重要的话，输入是submit )，我会注意到它周围有一个蓝色的突出显示(比如它不是边框，它是一个完整的矩形实际按钮在边界内，有圆角。但出于某种原因，当我按住按钮时，它会突出显示一个蓝色的矩形。有一些css可以删除吗？下面是一个屏幕：

浏览 4提问于2016-03-06得票数 1

回答已采纳

1回答

如何从JavaFX按钮中删除圆角

css、javafx

我注意到JavaFX中的按钮有圆角，这意味着当你有一个网格时，它们之间有很小的空白。谢谢。

浏览 1提问于2018-05-07得票数 5

回答已采纳

1回答

iOS在现有字段上绘制时，在视图内绘制一条线

ios、view、rendering

我有一个视图，上面有一堆标签和按钮，上面有现有的数据。我想做的是有一个圆角矩形内有一组标签和按钮，我有大约2组，我希望每组都有自己的圆角矩形。此外，我想要一条线来分隔圆角矩形彼此，但我听说标签可以做到这一点。我问这个的原因是因为在线的各种教程和方法都指定要覆盖drawRect函数。但是，我不确定这是否会覆盖我正在呈现的任何标签和按钮，或者它们的功能。

浏览 0提问于2012-01-24得票数 0

回答已采纳

1回答

为UIButton设置图像

xcode、uibutton、uiimage

我想在我的xcode项目中添加一个图像按钮。我使用界面生成器添加了一个圆角矩形按钮。setImage:infobuttonImg forState:UIControlStateNormal];} 最后，我在界面构建器中添加了一个链接，将圆角矩形按钮链接到然而，当我运行模拟器时，我仍然在我的界面上得到了普通的圆角矩形按钮，而不是将该按钮显示为我设置的

浏览 0提问于2013-01-31得票数 2

回答已采纳

点击加载更多