css - CSSでボタンの上半分に丸みを帯びた角を作成する

Question

ボタンの上半分だけを丸くしたいのですが。

border-radiusとを使用して、すべての側面に丸みを帯びた角を作成する方法を知っています-webkit-border-radius。

しかし、上半分のコーナーが好きなだけです。

CSSでこれを行う方法についてのガイダンスが必要です。

Answer 1

次のスタイリングルールを使用できます。

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

注：border-radiusルールは-webkit-ビットなしで機能します。

Answer 2

特定の角を丸くしたいときは、以下のコードを使用します

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

Answer 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>

Answer 4

これには、border-radiuscssタグの特定のバリエーションがあります。

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

Answer 5

特定の角だけを丸めたい場合は、次のコードを使用します。

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

最初の値は左上隅、2 番目は右上隅、3 番目は左下隅、4 番目は右下隅です。

Answer 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; }