13

css を使用して、すべての角ではなく特定の角だけを丸くする丸みのある角を作成することは可能ですか? 現在私は使用しています：

  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;

しかし、左上またはその他のコーナーを指定する方法がわかりません。他の角は直角のままにしておきたいです。

4

5 に答える 5

40

あなたはそれを次のようにすることができます

border-radius: 5px 10px 15px 20px; /* This is a short hand syntax */

上記の構文は、 から始まり5pxで終わるファンのように機能20pxします。下に図を追加しました。そこにある矢印は、省略形の構文フローの開始を示しています。

ここに画像の説明を入力

デモ

特定の半径を指定するには、次のようなプロパティを使用できます

border-top-left-radius: 10px;

これはに相当します

border-radius: 10px 0 0 0;
于 2013-08-15T05:43:19.413 に答える
1

使用できます:デモ

  • ボーダー半径左上
  • ボーダー半径右上
  • ボーダー半径-左下

  • ボーダー半径-右下

    border-radius: 5px 0 10px 0;

    ここに画像の説明を入力

詳細については、このWeb サイトを参照してください。

于 2013-08-15T05:44:38.057 に答える
1

これを使ってみてください: -

border-radius: <specific_value>px <specific_value>px <specific_value>px <specific_value>px

これら 4 つの値は、時計回りに異なるコーナーを表します。

于 2013-08-15T05:45:10.437 に答える
1 
.rounded-corners {
   -moz-border-radius: 20px;
   -webkit-border-radius: 20px;\
    border-radius: 20px;
}

このように変更できますが、

    -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;
    -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;
于 2013-08-15T05:54:49.697 に答える
0

特定のコーナーを指定することで、丸い境界線を作成するのは非常に簡単です:-

左上隅を丸くし、他のすべての隅をまっすぐにしたい場合は、「border-radius」の代わりにこのコードを使用して、目的の値をピクセルで指定します 

border-top-left-radius: 10px;
-moz-border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;

あなたは別の方法でもこれを行うことができます:-

境界半径: 10px 0px 0px 0px ;

ここで、最初のものは左上隅 (10px) 用、2 番目は右上隅 (0px) 用、3 番目は右下隅 (0px) 用、4 番目は左下隅 (0px) 用です。

これにより、左上隅のみが丸くなり、他のすべての隅は同じままになります

于 2013-08-15T06:47:45.097 に答える