注:Internet Explorerでは適用されません。(IE9にて確認)
角を丸めるborder-radius
border-radius: r;
r:半径各頂点に対する半径を指定することもできる他、角を楕円にすることもできる。あまり細かいことは実用性はない気がするので、気になるのならGoogleで調べれば良いであろう。
例
border-radius: 5px;
padding: 5px;
margin:10px;
border:2px solid #f60;
background:#fa3;
padding: 5px;
margin:10px;
border:2px solid #f60;
background:#fa3;
表示例
影をつけるtext-shadow, box-shadow
text-shadow: color x y blur;
box-shadow:(inset/outset) color x y blur;
color: 影の色box-shadow:(inset/outset) color x y blur;
y:影縦方向の位置
x:影横方向の位置
blur: ぼかしの度合い
inset/outset:(省略可:デフォルトはoutset) insetでは内側に影
単に影をつけるというだけではなく、彫り込んだような表現も可能。
例
padding: 5px;
margin:10px;
border:2px solid #fff;
background:#bbb;
color:#333;
text-shadow:#fff 1px 1px 2px;
box-shadow:#333 1px 1px 2px;
margin:10px;
border:2px solid #fff;
background:#bbb;
color:#333;
text-shadow:#fff 1px 1px 2px;
box-shadow:#333 1px 1px 2px;
表示例
例
padding: 5px;
margin:10px;
border:2px solid #fff;
background:#bbb;
color:#04f;
text-shadow:#fff 1px 1px 2px;
box-shadow:inset #333 1px 1px 2px;
margin:10px;
border:2px solid #fff;
background:#bbb;
color:#04f;
text-shadow:#fff 1px 1px 2px;
box-shadow:inset #333 1px 1px 2px;
表示例
0 件のコメント:
コメントを投稿