PHP & JavaScript Room :: 設置サンプル

実行結果

box-shadow:5px 5px 5px #000;
box-shadow:-10px -10px 0px #000;
box-shadow:2px 2px #ccc; 影のぼかしなし
box-shadow:inset 8px 8px rgba(0,0,0,0.3);

ソース

<style type="text/css">
#d_boxshadow1 {
    margin:0 10px 30px 10px; padding:10px;
    background-color:#eee;
    box-shadow:5px 5px 5px #ccc;
}
#d_boxshadow2 {
    margin:60px 10px 30px 10px; padding:10px;
    background-color:#eee;
    box-shadow:-10px -10px 0px #000;
}
#d_boxshadow3 {
    margin:30px 10px; padding:10px;
    background-color:#eee;
    box-shadow:2px 2px#ccc;
}
#d_boxshadow4 {
    width:100px; height:100px;
    margin:0 10px; padding:10px;
    background-color:#eee;
    border:3px solid #000;
    box-shadow:inset 8px 8px rgba(0,0,0,0.3);
}
</style>

<div id="d_boxshadow1">
    box-shadow:5px 5px 5px #000;
</div>
<div id="d_boxshadow2">
    box-shadow:-10px -10px 0px #000;
</div>
<div id="d_boxshadow3">
    box-shadow:2px 2px #ccc; 影のぼかしなし
</div>
<div id="d_boxshadow4">
    box-shadow:inset 8px 8px rgba(0,0,0,0.3);
</div>

polarized women