Web筋トレも使っているサーバー!ロリポップを使ってみない?

css3の勉強~その6~border-radius

Sponser Link

border-radius

角丸をつくる

[html] <div></div>
[/html] [css] div{
width:200px;
height:200px;
background:skyblue;
border-radius:30px; 半径30px
}

div{
width:200px;
height:200px;
background:skyblue;
border-radius:30px / 15px; 水平方向の半径/垂直方向の半径 楕円形になる
}

div{
width:200px;
height:200px;
background:skyblue;
border-bottom-right-radius:30px; 右下だけ半径30px
}

div{
width:200px;
height:200px;
background:skyblue;
border-radius:10px 20px 30px; 左上10px、右上と左下が20px、右下が半径30px
}

div{
width:200px;
height:200px;
background:skyblue;
border-radius:50%; 正円になる
background:url();画像指定するとアイコンのようになる
}
[/css]

Sponser Link

コメントを残す

メールアドレスが公開されることはありません。