記事の内容
border-radius 四角い画像を丸くする！
四角い画像を丸くする方法は簡単です！
border-radiusプロパティを使用してやります。
border-radiusプロパティは、ボックスのコーナーの角を丸くまとめて指定する際に使用します。
水平方向と垂直方向の二つの半径の組み合わせで決定されます。
加工するための設定の方法
htmlの文書に以下のように記述して画像を取り込みます。
取り込んだ画像が下でこれを加工していきます。
加工する画像に「class」属性をつける
ＣＳＳで編集しやすいようにＨＴＭＬ文章の画像にclass属性をつけます、名前は任意でつけられるので分かり易いものを
CSSを編集してclass属性なので「.doct2」「.(ドット)」を忘れずつけるように
border-radiusでどれだけ丸くするか設定する
設定の方法はｐｘ(ピクセル数）でする方法と%(パーセンテージ)でやる方法があります。
正方形の場合は画像幅の半分の数字を設定すれば簡単ですが、長方形の場合は楕円形になるので注意しましょう。
一辺が200ピクセルある画像の半径7０ピクセルを丸める設定です。
これは半径の50%を丸めるように設定しています。
border-radius 画像を加工 四角い画像を丸くする！
画像の加工をこれで簡単に丸く加工ができますのでやってみて下さい。
