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の円
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の円
この記事へのコメント
コメントを書く
この記事へのトラックバックURL
https://fanblogs.jp/tb/7850997
※言及リンクのないトラックバックは受信されません。
この記事へのトラックバック