ドロップ シャドウを使用してオブジェクトを作成しようとしています。これを行うにはCSS3が必要だと思います。これまでのところ、このようなものがあります。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div
{
width:300px;
height:100px;
background-color:yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
ドロップ シャドウを使用してオブジェクトを作成しようとしています。これを行うにはCSS3が必要だと思います。これまでのところ、このようなものがあります。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div
{
width:300px;
height:100px;
background-color:yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
ボックス シャドウを追加する:
#thediv
{
width:300px;
height:100px;
-moz-box-shadow: 10px 10px 5px #888; /* firefox shadows*/
-webkit-box-shadow: 10px 10px 5px #888; /* chrome / safari shadows */
box-shadow: 10px 10px 5px #888; /* general browser support */
}
このフィドルの例ですが、注意として、これは CSS3 であり、IE6/7 は古いため、それらでは動作しません。
このスタイルを div タグに追加します
-moz-box-shadow: 10px 10px 5px #888888;
/* Firefox 3.6 and earlier */
box-shadow: 20px 20px 55px #888888;