jQueryUI模式对话框中的奇怪阴影

我正在使用此代码创建一个工作正常的模式对话框：

var div = $('<div>');
        div.html('<p>Lorem ipsum dolor sit amet, sint utinam persecuti cu vel, ut his vero mazim omittantur. Assum tation ea quo. Nec at atqui nobis complectitur, dolores adipisci mei ad. Graeci rationibus referrentur ius te, eu regione pertinacia eum.  </p>  <p>Labores efficiendi in per, vix volumus nominati in. Mea id viris ludus impedit. Nec te eligendi aliquando reprimique, ut sea vidisse principes. Mei suas purto debitis te, erat veritus sit in. Ut nec elit nulla postulant, vix at aeque menandri voluptatibus.  </p>  <p>Qui erant iusto laudem et, ad omnes debitis albucius vim. Et pri discere insolens, partem evertitur ne sed. Id minim virtute sapientem duo, ne ipsum dignissim vulputate eam. Duo diceret volumus platonem ne.</p>');
        div.attr('title', 'Error!');
        div.dialog({
            autoOpen: true,
            modal: true,
            draggable: false,
            resizable: false,
            height: 340,
            width: 320,
            open: function (event, ui) {
                $(".ui-dialog-titlebar-close").hide();
            },
            buttons: {
                'Ok': function () {
                    $(this).dialog('close');
                    return 0;
                }
            }
        });
        return true;

var div=$（''）；
div.html（Lorem ipsum Door sit amet，sint utinam Purpose cu vel，以及他在atqui nobis Completitor，dolores adipisci mei ad.Graeci Perrentur，eu Region pertinacia eum.的研究中所做的假设，在每种情况下，vix体积提名中的劳动效率均低于0.5%。这是由于病毒的阻碍这是我的报复，这是我的原则。我必须承认，这是我的真理。我必须承认，这是我的真理。我必须承认，这是我的真理。我必须承认，这是我的真理《柏拉图书》东北卷；
div.attr（'title'，'Error！'）；
div.dialog({
自动打开：对，
莫代尔：是的，
可拖动：错误，
可调整大小：false，
身高：340，
宽度：320，
打开：功能（事件、用户界面）{
$（“.ui对话框标题栏关闭”）.hide（）；
},
按钮：{
“确定”：函数（）{
$（this.dialog（'close'）；
返回0；
}
}
});
返回true；

…除了标题栏下方的奇怪阴影。请在此处查看它的实际操作：

我有两个问题：

我怎样才能消除阴影

如何使标题栏变为红色？（可能带有图标）

此处示例：

使用下面的css

.ui-widget-header{
    background:red !important;
    border: red;
}
.ui-widget-content {
    background: none repeat scroll 0 0 #EEEEEE !important;
    border: 1px solid #DDDDDD;
    color: #333333;
}

---

演示：

您好，您可以在jquery-ui.css中更改这些内容

shadow----->.ui小部件内容{背景：无！重要；}

标题栏-->.ui小部件标题{custom}

---

谢谢。但是为什么会发生这种情况呢？阴影不应该首先出现吗？这里是阴影的问题：。ui小部件内容{背景：url（“image/ui-bg\u highlight-soft\u 100\ueeeeeeee\u 1x100.png”）重复-x滚动50%顶部#eeee；边框：1px实心#ddddddd；颜色：#333;

.ui-widget-header{
    background:red !important;
    border: red;
}
.ui-widget-content {
    background: none repeat scroll 0 0 #EEEEEE !important;
    border: 1px solid #DDDDDD;
    color: #333333;
}