Jquery UIでドロップシャドウを使いたい

Question

jQuery UIのダイアログボックスの周りにドロップシャドウを付けたいです。

例：

<div id="dialog-form" class="ui-widget-shadow ui-corner-all">
影付きのコンテンツがボックス内のあります
    </div>

それから以下をjavascriptセクションで行います：

$(function () {
    $("#dialog-form").dialog({
        resizable: false,
        height: 300,
        width: 350,
        modal: true
    });
});

dialog-formダイアログでどのように影をつけますか？

Answer 1

CSS3を使ってできますが、全てのブラウザでは機能しません。

１：ダイアログコール内で、"dialogClass"の値を選んだクラス名と同じにします：

dialogClass: 'dialogWithDropShadow'

２：スタイルシートで、ステップ１で設定したクラスでドロップシャドウを設定します。

<style type="text/css">
.dialogWithDropShadow
{
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
</style>