爲什麼Firefox會在CSS形狀下面顯示陰影？

如圖所示，我在我的網站上使用了一個三角形：http://css-tricks.com/examples/ShapesOfCSS/爲什麼Firefox會在CSS形狀下面顯示陰影？

不幸的是，這在瀏覽一段時間後無法正確顯示瀏覽器。

我的代碼

div.triangle { 
    width:0px; 
    height:0px; 
    border-left: 55px solid transparent; 
    border-right: 55px solid transparent; 
    border-top: 15px solid #D5CDBA; 
}

http://jsfiddle.net/mPSj9/5/

使火狐產生形狀下方一些更暗線。爲什麼是這樣，我可以擺脫它？

來源

2012-11-27 unR

它不是一個影子，它的顏色，這是因爲border-left, border-right顏色

Demo

CSS

div.main-link-active-triangle { 
    position:absolute; 
    top:50px; 
    left:50px; 
    width:0px; 
    height:0px; 
    border-left: 55px solid transparent; 
    border-right: 55px solid transparent; 
    border-top: 55px solid #D5CDBA; 
}

Width Background Color

幾例的：CSS triangle custom border color

正如@Aleks Dorohovich說，你可以使用rgba() CSS3屬性，使邊框不透明的，但是（注：不會對< = IE8工作）

來源

2012-11-27 10:23:13

好的，但我需要有三角形平展，只有15px高。 – unR

不錯的工作，編輯你的答案後，另一個老兄發佈了工作解決方案完全不同:) – unR

@unR編輯正確的答案不是一件壞事，它的網站，說編輯答案，糾正他們，我尊重他回答太..我要在那裏陳述他的名字 –

試圖改變透明屬性RGBA不透明度0

例如：

border-left: 55px solid rgba(255,255,255,0); 
border-right: 55px solid rgba(255,255,255,0);

來源

2012-11-27 10:28:26

很好這個作品，非常非常 – unR

爲什麼Firefox會在CSS形狀下面顯示陰影？

回答

相關問題