すばらしいすぎる
CSS3を使って角丸を作ることができるとわかっていたが、実際に試してみると、おもしろい。
border-radius
を参考に作りました。
<!DOCTYPE HTML> <html> <head> </head> <body> <div style=" background-color:red; height:100px; width:100px; -webkit-border-radius: 6px 6px 6px 6px; -moz-border-radius: 6px 6px 6px 6px; border-radius: 6px 6px 6px 6px;"></div> </body> </html> |
でまず考える。
水平方向:左上 右上 右下 左下
で設定を行い、垂直方向も同様に、
垂直方向:左上 右上 右下 左下
と指定する。
ただし、/以降を省略した場合は、水平方向と同じ半径で設定をしてくれる。
実行結果は、こちら、chromeかsafariでお試しあれ。
0 コメント:
コメントを投稿