帶陰影效果的圓角不適用於鍍鉻

-1

我創建了一個帶圓角和陰影效果的div。這個div在firefox和Safari瀏覽器中很流暢。但是chrome渲染不正確。因爲Chrome瀏覽器的使用量在市場上增長了，所以我希望在瀏覽器中使用這項工作請看下面的代碼：帶陰影效果的圓角不適用於鍍鉻

<html> 
<style> 
.cropdiv{ 
    margin-left:50px; 

    -moz-border-radius-topleft: 10px; 
    -moz-border-radius-topright: 10px; 
    -webkit-border-top-left-radius: 10px; 
    -webkit-border-top-right-radius: 10px; 
    -moz-border-radius-bottomright: 10px; 
    -webkit-border-bottom-right-radius: 10px; 
    -moz-border-radius-bottomleft: 10px; 
    -webkit-border-bottom-left-radius: 10px; 

    box-shadow:5px 5px 5px #999; 
    -webkit-box-shadow:5px 5px 5px #999; 
    -moz-box-shadow:1px 3px 4px 2px #999; 

    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#444444),color-stop(0.1, #444444)); 
    background: -moz-linear-gradient(top, white, #444444 15%); 

    font-size: small; 
    font-family: 'Lucida Console', Monaco, monospace; 
    color: #FFFFFF; 
    text-align: left; 
    font-weight: bold; 
    border:2px solid #FFF; 
    border-top:0px solid #FFF; 
} 

</style> 

<div id="container" class="cropdiv" style="height:100px;width:370px;"> 
    <div style="padding-top:10px;">textCapture</div> 
    <hr style="padding:0%;width:100%;"></hr> 

</div> 
</html>

我使用的是chrome 10.0.646.0版本的fedora14平臺。看看@以下畫面：

enter image description here

任何幫助非常感謝，謝謝！

來源

2011-10-20 VKGS

「不正確渲染」是什麼意思？哪一部分？ – Sparky

@ Sparky672謝謝。在Chrome中的問題是圍繞div的邊界沒有正確渲染。左邊框在div內對齊。 – VKGS

你能發佈一個鏈接或截圖嗎？ – Sparky

您不需要「-webkit」（用於最新版本）。較新的Webkit（Chrome瀏覽器& Safari）瀏覽器符合CSS3。包括「-webkit」如果支持舊版瀏覽器是重要的，但肯定也添加兼容CSS3代碼...

#example1 { 
    border-radius: 15px; 
}

來源

2011-10-20 06:06:09 Sparky

是啊！你是對的。但邊界還不完美。 – VKGS

@Sekar，奇怪的是，Chrome會比Safari更加不同。 – Sparky

你應該仍然提供舊版本的廠商前綴解決方案 – albert

那麼這個代碼是與我的工作鉻完美。問題是，Chrome瀏覽器沒有文本渲染器。所以感覺好像背景已經像素化了。

來源

2011-10-20 06:06:58 themajiks

我正在使用chrome 10.0.646.0 build in fedora14。這是問題嗎？ – VKGS

可能。您的Chrome版本很古老。曾聽說過升級？ –

@LeaVerou現在我安裝了chrome build 14.0.835.202。即使現在存在這個問題。鉻版本14不是古老的權利？ – VKGS

帶陰影效果的圓角不適用於鍍鉻

回答

相關問題