2

疑似要素 :before および :after とともに CSS 境界プロパティを使用して、要素に幾何学的形状の外観を与えてきました。簡単な例は次のようになります。

HTML:

<div id="shapeOne"></div>

CSS:

#shapeOne
{
   height:0px;
   width:0px;
   margin:20px;
   border-style:solid;
   border-width:200px 200px 200px 200px;
   border-color:transparent #f00 #0f0 transparent;  
}

境界線の 2 つを透明にし、2 つの色を指定することで、効果的に三角形を作成しました。

ここで例を見ることができます: http://jsfiddle.net/VTzS9/1/

これは、Firefox を除くすべてのブラウザーで正常に表示されるようです (特に PC バージョン。Mac 上の Firefox では正常に表示されます)。問題は、Firefox が境界辺の間に影/歪み効果を配置し、境界線 (空の要素がある場所) に「キンク」を作成するように見えることです。この効果は、異なる境界辺のサイズの違いが大きくなるにつれて増加します。 -したがって、境界線のサイズが等しい場合（上記のリンクの最初の形状）、問題はほとんど（しかしまだ）目立ちませんが、境界線のサイズの違いが大きくなると（リンクの形状2と3）、効果がより顕著になります。

誰かがこれを引き起こしている理由を知っていますか?効果を取り除くために何かできることがあれば?

乾杯！

4

1 に答える 1

2

使用する

rgba(255,255,255,0)

それ以外の

transparent

.

これにより、Firefox でも動作するようになります。

デモ: http://jsfiddle.net/SkXXy/

PS: ここと同じ問題:奇妙な暗い境界線: Firefox の css 矢印の後

于 2013-01-17T10:30:08.430 に答える