箱の周りにガラス（不透明/透明）境界線がありますか？私はCSSのボックスの周囲に境界線を探しているガラスのようなものを得ることができます

Question

は、私は思ったんだけど。たとえば、ulなどを含むナビゲーションdivここでは、記述しようとしているもののタイプです。

http://puu.sh/uAqw

ありがとう！

Answer 1

例の境界線内のパターンがあるので（親の背景がどこを通って、所望の程度に輝くことができるように）、あなたはおそらく、アルファチャンネルを有する1つまたは複数のPNGの背景画像が必要になります。一人で均一なRGBA色との境界がは、ここでは十分ではありません。

そして巣その背景を持つ要素内の別のブロック要素。 1枚の背景画像に、例えばHTML：

<div id="glass-box"> 
    <div id="inner"> 
    <p>Text</p> 
    </div> 
</div> 

例CSS：あなたは不透明< 1.0とのRGBAカラーをしようとする場合がありますtransparentの代わりに

#glass-box 
{ 
    background: transparent url(glass.png) 0 0 no-repeat; 
} 

#glass-box #inner 
{ 
    margin: 10px; 
    background-color: white; 
} 

。おそらく、半透明のグレースケールのガラスの背景画像を使用して、色相の上に投影することができます。

複数の境界線がより良い（私のコメントを参照してください）ネイティブにサポートされるまで、あなたはブロック要素をネストし、それぞれ異なる境界を与えることによって、複数の国境を達成することができます。これらの要素の一部のマージンは、目的の効果を得るためにネストする必要がある要素の数を減らすのに役立ちます。

そして、CSS Backgrounds and Borders Level 3の複数の背景画像がよりサポートされています（しかし、それはすでにCRなので幸運かもしれません）場合は、入れ子にして異なる位置の（異なる）背景画像を使用して、 （配置された）ブロック要素を含む。そうすれば、固定サイズのボックスと背景画像は必要ありません。

Answer 2

あなたは今のガラス/ブラー効果幅CSSを作成することはできません。しかし、幅の透明な境界線とボックスの影は、背景を減衰させることができます。あなたは、この使用して、純粋なCSSに非常に近い効果を得ることができhttp://jsfiddle.net/DoubleYo/hyETB/1/

Answer 3

：

あなたは私のjsfiddleで結果を見ることができます。この例では、ハイライトとシャドウを追加するために、RGBAボーダーカラーと複数のボックスシャドウを持つ単一の要素を使用しています。

デモ：http://dabblet.com/gist/2775781

<div class="box">Your message.</div> 

.box { 
    background: #f0edcc; 
    background-clip: padding-box;   /* Background stops at border */ 
    border: 4px solid rgba(255,255,255,.2); 
    border-radius: 3px; 
    box-shadow: 
     0 0 1px rgba(255,255,255,.8), /* Bright outer highlight */ 
     0 0 3px rgba(0,0,0,.8),  /* Outer shadow */ 
     1px 1px 0 rgba(0,0,0,.8) inset, /* Inner shadow (top + left) */ 
     -1px -1px 0 rgba(0,0,0,.8) inset; /* Inner shadow (bottom + right) */ 
    padding: 10px; 
} 

なおbox-shadowとRGBAの境界色のみIE9 +とFirefox、クローム、オペラとSafariの最新バージョンでサポートされています。後者のブラウザの古いバージョンでは、プレフィックス付きのバージョンのプロパティがサポートされているかもしれません。いずれかをサポートしていないブラウザでは、これは内側の黄色のボックスに劣化します。