jQuery .css（）中的CSS box-shadow

Question

Firefox 18似乎無法識別-moz-box-shadow或box-shadow CSS屬性。

如果我使用border-color ，一切正常。

$($this).hover(
    function () {
        //$(this).css('border-color', '#ff0');
        $(this).css('box-shadow', '10px', '10px', '5px', '#888');
        //$(this).css('-moz-box-shadow', '10px', '10px', '5px', '#888');
    }, function () {
        $(this).css('border-color', '');
        //$(this).css('border-width', '');
    }
);

我究竟做錯了什么？

Answer 1

您需要將參數設置為一個字符串文字。 css(property name, value)函數的value參數是一個參數。

 $(this).css('box-shadow', '10px 10px 5px #888');

Answer 2

這個：

$(this).css('box-shadow', '10px', '10px', '5px', '#888');

語法不正確。 您需要為CSS屬性設置一個值：

$(this).css('box-shadow', '10px 10px 5px #888');

Answer 3

需要是：

$(this).hover(function() {
   $(this).css('box-shadow', '10px 10px 5px #888');
}, function() {
   $(this).css('border-color', '');
});

Answer 4

它應該是：

$(this).css('-webkit-box-shadow', '10px 10px 5px #888');
$(this).css('-moz-box-shadow', '10px 10px 5px #888');
$(this).css('box-shadow', '10px 10px 5px #888');

Answer 5

適用於Safari，谷歌Chrome和Opera

$(this).css('-webkit-box-shadow', '10px 10px 5px #888');

對於Mozilla Firefox使用

$(this).css('-moz-box-shadow', '10px 10px 5px #888');

對於其他Web瀏覽器使用

$(this).css('box-shadow', '10px 10px 5px #888');