在 CSS 中为按钮的上半部分创建圆角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11483708/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating rounded corners for top half of the buttons in CSS
提问by lakesh
I would like to make rounded corners only for the top half of buttons.
我只想为按钮的上半部分制作圆角。
I know how to make rounded corners for all sides using border-radiusand -webkit-border-radius.
我知道如何使用border-radius和为所有边制作圆角-webkit-border-radius。
But only like to have corners for the top half.
但只喜欢在上半部分有角落。
I need some guidance on how to do this in CSS.
我需要一些有关如何在 CSS 中执行此操作的指导。
回答by starbeamrainbowlabs
You can use the following styling rules:
您可以使用以下样式规则：
border-top-left-radius
border-top-right-radius
Note: The border-radiusrule works without the -webkit-bit.
注意：该border-radius规则在没有-webkit-位的情况下有效。
回答by phoxd
When I want to round specific corners I use code below
当我想圆特定的角时，我使用下面的代码
border-radius: 10px 10px 0 0;
// top-left top-right bottom-right bottom-left.
回答by Saad Imran.
Here's the pattern I like to use:
这是我喜欢使用的模式：
CSS
CSS
.round-corners-5px{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.round-corners-10px{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.unround-top-corners{
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.unround-bottom-corners{
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
HTML
HTML
<button class="round-corners-5px unround-bottom-corners" style="background-color: white;"></button>
回答by arkascha
There are specific variants of the border-radius css tag for this:
有边界半径 css 标签的特定变体：
border-top-left-radius:2em;
border-top-right-radius:2em;
回答by arkascha
If you want to round only certain corners, this is the code for it:
如果你只想圆某些角，这是它的代码：
border-radius:5px 5px 5px 5px;
The first value is for the top left corner, second for the top right corner, third for the bottom left corner and fourth for the bottom right corner.
第一个值用于左上角，第二个用于右上角，第三个用于左下角，第四个用于右下角。
回答by DevWL
If you use sass scss, then you could write it once and reuse it as a simple line of code like this:
如果您使用 sass scss，那么您可以编写一次并作为一行简单的代码重复使用，如下所示：
In your sass or scss file, define mixin like this:
在你的 sass 或 scss 文件中，像这样定义 mixin：
@mixin rounded($amount: "10px",$position: null) {
@if $position != null {
@if $position == "top" or $position == "bottom" {
//top or bottom
-webkit-border-#{$position}-left-radius: $amount;
-moz-border-#{$position}-left-radius: $amount;
border-#{$position}-left-radius: $amount;
-webkit-border-#{$position}-right-radius: $amount;
-moz-border-#{$position}-right-radius: $amount;
border-#{$position}-right-radius: $amount;
} @else {
// top-left or top-right or bottom-left or bottom-right
-webkit-border-#{$position}-radius: $amount;
-moz-border-#{$position}-radius: $amount;
border-#{$position}-radius: $amount;
}
} @else {
// ALL IF EMPTY
-webkit-border-radius: $amount;
-moz-border-radius: $amount;
border-radius: $amount;
}
}
Then in the scss file you can use mixin like so:
然后在 scss 文件中，您可以像这样使用 mixin：
@include rounded(); /*as default 10px on all corners*/
@include rounded(15px); /*all corners*/
@include rounded(15px, top); /*all top corners*/
@include rounded(15px, bottom); /* all bottom corners*/
@include rounded(15px, top-right); /*this corner only*/
@include rounded(15px, top-left); /*this corner only*/
@include rounded(15px, bottom-right); /*this corner only*/
@include rounded(15px, bottom-left); /*this corner only*/
This .scss code will generate this .css code:
此 .scss 代码将生成此 .css 代码：
/* as default 10px on all corners */
-webkit-border-radius: "10px";
-moz-border-radius: "10px";
border-radius: "10px";
/* all corners
*/
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* all top corners
*/
-webkit-border-top-left-radius: 15px;
-moz-border-top-left-radius: 15px;
border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-top-right-radius: 15px;
border-top-right-radius: 15px;
/* all bottom corners
*/
-webkit-border-bottom-left-radius: 15px;
-moz-border-bottom-left-radius: 15px;
border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-moz-border-bottom-right-radius: 15px;
border-bottom-right-radius: 15px;
/* top-right corner only
*/
-webkit-border-top-right-radius: 15px;
-moz-border-top-right-radius: 15px;
border-top-right-radius: 15px;
/* top-left corner only
*/
-webkit-border-top-left-radius: 15px;
-moz-border-top-left-radius: 15px;
border-top-left-radius: 15px;
/* bottom-right corner only
*/
-webkit-border-bottom-right-radius: 15px;
-moz-border-bottom-right-radius: 15px;
border-bottom-right-radius: 15px;
/* bottom-left corner only
*/
-webkit-border-bottom-left-radius: 15px;
-moz-border-bottom-left-radius: 15px;
border-bottom-left-radius: 15px; }
回答by shaijut
thishelps to understand how it works, i did this to make left squared and right rounded corners :
这有助于理解它是如何工作的，我这样做是为了制作左方角和右圆角：
.btn-circle.btn-lg {
width: 170px;
height: 47px;
padding: 10px 16px;
font-size: 17px;
line-height: 1.33;
/*border-radius: 25px;*/ //use this for both side rounded corner side
border-radius: 0px 50px 50px 0px / 50px 50px 50px 50px;
}
thisguide helped me to make rounded buttons in twitter bootstrap
本指南帮助我在 twitter bootstrap 中制作圆形按钮
