CSSを使用したソフトエッジ？

Question

私はRGBAを使用して、画像の上にオーバーレイする透明な背景を作成しています。うまく動作します。私の質問は次のとおりです。ボックスの端を「柔らかく」して、写真とハードエッジの両方に流れ込む場所はありますか？私はPhotoshopで背景画像を作成することによってこれを行うことができます知っている

#past{ 
    position:absolute; 
    left:0; 
    top:363px; 
    background-color: rgba(34,34,34,0.6); 
    /* For IE 5.5 - 7*/ 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222); 
    /* For IE 8*/ 
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222); 
    z-index:10; 
    padding:10px; 
} 

が、私は、画像を使用して対唯一の方法CSSを探していました：

はここに箱のための私のCSSです。

また、これがすべてのブラウザで機能することを可能にしたいと思っています。

ありがとうございました。 =>

あなたはCSSグラデーションを使用することができます

Answer 1

もう1つの方法は、私の個人的に好きなCSSツールの1つ、つまりbox-shadowを使用することです。

ボックスシャドウは実際にはノード上のドロップシャドウです。それは次のようになります。

-moz-box-shadow: 1px 2px 3px rgba(0,0,0,.5); 
-webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.5); 
box-shadow: 1px 2px 3px rgba(0,0,0,.5); 

引数は次のとおりです。

1px: Horizontal offset of the effect. Positive numbers shift it right, negative left. 
2px: Vertical offset of the effect. Positive numbers shift it down, negative up. 
3px: The blur effect. 0 means no blur. 
color: The color of the shadow. 

だから、あなたはあなたの現在の設計を残し、などのボックスシャドウを追加することができます。

box-shadow: 0px -2px 2px rgba(34,34,34,0.6); 

する。これは与えるべきですあなたは「ぼやけた」上端です。

このウェブサイトはより多くの情報が役立ちます。http://css-tricks.com/snippets/css/css-box-shadow/

Answer 2

- ブラウザ間で一貫ありませんが、あなたがそのような一人一人

のためにそれをコーディングする必要がありますので：CSS3 Transparency + Gradient

グラデーションの一番上または上より透明であるべきです右上隅（機能に応じて）

Answer 3

それはあなたが探しているフェージングの種類によって異なります。

しかし、影と丸みを帯びたコーナーでは素晴らしい結果が得られます。丸みを帯びたコーナーは、シャドーが大きいほど、丸いコーナーでバランスを取らない限り、ぼやけて見えます。

http://jsfiddle.net/tLu7u/

も... http://css3pie.com/