在 CSS 中为按钮的上半部分创建圆角答案

【问题标题】：Creating rounded corners for top half of the buttons in CSS在 CSS 中为按钮的上半部分创建圆角
【发布时间】：2012-07-14 02:01:59
【问题描述】：

我想只为按钮的上半部分制作圆角。

我知道如何使用border-radius 和-webkit-border-radius 为所有边制作圆角。

但只喜欢上半部分有角。

我需要一些关于如何在 CSS 中执行此操作的指导。

【问题讨论】：

感谢大家的快速回复。今天学到了一些新东西...
minimal reproducible exampleborder-radius: 3px 3px 0 0;只需记住上（左）右下（右）左的首字母缩写词“TRBL”或助记符“圆形按钮很麻烦”。基本上顺时针移动。

标签： css

【解决方案1】：

您可以使用以下样式规则：

border-top-left-radius
border-top-right-radius

注意：border-radius 规则在没有 -webkit- 位的情况下有效。

【讨论】：

【解决方案2】：

为此有border-radius css标签的特定变体：

border-top-left-radius:2em; 
border-top-right-radius:2em;

【讨论】：

这是很多代码。可以缩小到border-radius: 2em 2em 0 0;
@JGallardo 如果用户需要继承左下/右下的边框半径怎么办，我们可以做border-radius: 2em 2em inherit inherit吗？这仍然很长，而且可读性较差（对于那些永远不记得所有 4 个属性的顺序的人）。

【解决方案3】：

这是我喜欢使用的模式：

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

<button class="round-corners-5px unround-bottom-corners" style="background-color: white;"></button>

【讨论】：

【解决方案4】：

如果你只想圆某些角，这是它的代码：

border-radius:5px 5px 5px 5px;

第一个值是左上角，第二个是右上角，第三个是左下角，第四个是右下角。

【讨论】：

【解决方案5】：

当我想绕过特定的角落时，我使用下面的代码

border-radius: 10px     10px      0           0;
            // top-left top-right bottom-right bottom-left.

【讨论】：

【解决方案6】：

如果你使用 sass scss，那么你可以编写一次，然后像这样简单的一行代码重用它：

在你的 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; 
  }

}

然后在 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*/

这个 .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; }

【讨论】：

为了在 SASS 中简化这一点，您可以将其写为 @mixin rounded($amount:"10px 10px 10px 10px") { -moz-border-radius: $amount; -webkit-border-radius: $amount; border-radius: $amount; -khtml-border-radius: $amount; }，在其中您输入所有径向金额作为 $amount（左上角右下角右下角）

【解决方案7】：

this 有助于理解它的工作原理，我这样做是为了制作左方圆角和右圆角：

.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 帮助我在 twitter bootstrap 中制作圆形按钮

【讨论】：