CSS画像を丸くする方法

CSS では、border-radius 属性を使用して画像を丸くすることができ、img 要素に「border-radius: 50%;」スタイルを追加するだけです。 border-radius 属性は、要素に丸い境界線を設定できます。丸い角の半径は、幅/高さの半分を超えることはできません。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS では、border-radius 属性を使用して画像を丸くすることができます。

コード例を詳しく見てみましょう:

レンダリング:

説明:

border-radius 属性は、要素の丸い境界線を設定するために使用されます。値 1 ～ 4 を指定すると、境界線に (1 ～ 4) 個の丸い角を作成できます。半径は丸い角は幅/高さの半分を超えることはできません。

構文:

border-radius: 1-4 length|%

値:

• length 曲線の形状を定義します。

• % % を使用して角の形状を定義します。

注: 各半径の 4 つの値の順序は、左上隅、右上隅、右下隅、左下隅です。左下隅を省略した場合は、右上隅も同じになります。右下隅を省略した場合は、左上隅も同じになります。右上を省略した場合は左上と同じになります。

• 4 つの値: 最初の値は左上隅、2 番目の値は右上隅、3 番目の値は右下隅、4 番目の値は左下隅です。コーナー。

  border-radius: 15px 50px 30px 5px

  
  

• ##3 つの値: 最初 最初の値は左上隅、2 番目の値は右上隅と左下隅、3 番目の値は右下隅です。
  #border-radius: 15px 50px 30px

  
  

2 つの値: 最初の値は左上隅と右下隅、2 番目の値は右上隅と下隅です。左隅

• 境界線半径: 15px 50px

  
  

1 つの値: 4 つの丸い角は同じ値です

• border-radius: 25px

  
  

（学習ビデオ共有:

以上がCSS画像を丸くする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。