昨日アップした小物光源のhtmlデータですが、htmlとcssだけで円を作成しています。
タブレットやスマートフォンを小物撮影光源に（2）2021/08/25●
ソース（css）はこんな感じです。
.red{
display:inline-block;
/*インラインレベルのブロックコンテナを生成*/
width:400px; /*幅*/
height:400px; /*高さ*/
border-radius:50%; /*要素の角を丸める*/
background:red; /*色指定*/
}
上図はborder-radiusで指定した%の違いです。50%以上は変化ありません。ちなみに指定する%は記述によりさらに面白い表情をしてくれます。
.red{
display:inline-block;
width:400px;
height:400px;
border-radius:30% 10%;
background:red;
}
.red{
display:inline-block;
width:400px;
height:400px;
border-radius:50% 40% / 10% 40%;
background:red;
}
.red{
display:inline-block;
width:400px;
height:400px;
border-radius:10% 30% 50% 70%;
background:red;
}
色々と面白いです。
