アフィリエイト広告を利用しています

広告

posted by fanblog

2018年07月03日

border-radius @円弧

◆border-radiusで四隅の角を丸くする








width:400px;
height:400px;


◆個別指定 左上




width:400px;
height:400px;

border-top-left-radius:150px;
・左上=半径150pxの円弧


◆個別指定 右上




width:400px;
height:400px;

border-top-right-radius:150px;
・右上=半径150pxの円弧


◆個別指定 右下




width:400px;
height:400px;

border-bottom-right-radius:150px;
・右下=半径150pxの円弧


◆個別指定 左下




width:400px;
height:400px;

border-bottom-left-radius:150px;
・左下=半径150pxの円弧


◆一括指定 @




width:400px;
height:400px;

border-radius:150px;
・左上=右上=右下=左下=半径150pxの円弧


◆一括指定 A




width:400px;
height:400px;

border-radius:50px 100px;
・左上=右下=半径50pxの円弧
・右上=左下=半径100pxの円弧


◆一括指定 B




width:400px;
height:400px;

border-radius:50px 100px 150px;
・左上=半径50pxの円弧
・右上=左下=半径100pxの円弧
・右下=半径150pxの円弧


◆一括指定 C




width:400px;
height:400px;

border-radius:0px 50px 100px 150px;
・左上=直角のまま
・右上=半径50pxの円弧
・右下=半径100pxの円弧
・左下=半径150pxの円弧


◆%指定 正方形は円弧になる




width:400px;
height:400px;

border-radius:10% 20% 30% 40%x;
・左上=半径40pxの円弧
・右上=半径80pxの円弧
・右下=半径120pxの円弧
・左下=半径160pxの円弧


◆%指定 長方形は楕円弧になる

width:500px;
height:300px;

border-radius:10% 20% 30% 40%;
・左上=左右50px 上下30pxの楕円弧
・右上=左右100px 上下60pxの楕円弧
・右下=左右150px 上下90pxの楕円弧
・左下=左右200px 上下120pxの楕円弧


◆50%で一括指定すれば正方形は円になる






width:400px;
height:400px;

border-radius:50%;
・左上=右上=右下=左下=半径200pxの円
posted by templayer at 02:50 | Comment(0) | TrackBack(0) | css
この記事へのコメント
コメントを書く

お名前:

メールアドレス:


ホームページアドレス:

コメント: 必須項目

認証コード: 必須項目

※画像の中の文字を半角で入力してください。

この記事へのトラックバックURL
https://fanblogs.jp/tb/7850997

※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
CSSシミュレータ(filter)

指名手配
最新コメント
最新トラックバック
月別アーカイブ
忍者AdMax
忍者AdMax
忍者AdMax
QRコード
検索
ランキング投票
ブログランキング・にほんブログ村へ
ブログランキング・にほんブログ村へ
×

この広告は30日以上新しい記事の更新がないブログに表示されております。