CSSバブルボックスの使い方を詳しく解説

气泡框（或者提示框）是网页中一种很常见的元素，大多用来展示提示信息，如下图所示：

拆分来看，形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头，要制作出这样的气泡框，如果解决了三角形小箭头就容易了。一种方法就 是制作这样一个三角形箭头的图片，然后定位在矩形框上。但这种解决办法在后期更改气泡框会很不方便，可能每修改一次气泡框都要重新制作一个三角形小图标。 如果我们能够直接用HTML和CSS代码实现这样一个三角形小箭头一切都迎刃而解了。

1、把div的width和height都设为0，四边都形成三角形。

# test{width:0; height:0; border-width:75px; border-style:solid; border-color:#09F #990 #933 #0C9;}

2、在主流浏览器中检测一下，发现IE6中存在一个小问题，上下边能形成三角形，左右两边仍然还是梯形。

解决：把div的font-size和line-height都设为0的，此时，div的四边在IE6下都能形成完美的三角形。

#test{ width:0; height:0; border-width:75px; border-style:solid; border-color:#09F #990 #933 #0C9; font-size:0; line-height:0;}

3、我们只需要其中的一个三角形，那么只需要将其他三边的color设置为透明或者跟页面背景一样的颜色，就能模拟出一个三角来，推荐将其他三边颜色设置为透 明，即color的值为transparent，如果其他三边颜色跟页面背景一样，虽然视觉上只能看到一个三角，但背景颜色一旦改变，其他三边颜色也要随 之改变。

#test{ width:0; height:0; border-width:75px; border-style:solid; border-color:#09F transparenttransparent; font-size:0; line-height:0;}

4、在IE6下transparent无效，其他三边被设置成默认的黑色了。

解决：把border-style设置为dashed后，IE6下其他三边就能透明了。

 5、到这一步我们已经成功的模拟出了一个小三角，下一步我们把这个小三角同矩形框结合起来。先设置一个矩形框，然后把小三角定位到矩形框上。先来写出HTML结构：

         

      CSS气泡框实现

.tag{ 幅:300px; 高さ:5px; 位置:相対; }

.tag {表示: ブロックの幅:20px; ; left:100px;border-style:solid 破線 破線; border-color:#09F 透明 透明;フォントサイズ:0; 線の高さ:0;}

6,

方向 これはソリッドであり、必要なのは中空効果です。ここでは、バブル ボックスの背景色と同じ色の小さな三角形を重ね合わせ、重ね合わせた小さな三角形を移動して実現します。
まず、次のように HTML 構造を調整する必要があります:

CSS スタイルの変更を次のように実装します:

.tag{ width: 300px; 高さ: 5px; 位置: 相対; 背景色: #FFF;

; 境界線: 20px;左:100px;ボーダースタイル:実線破線;ボーダーカラー:#09F透明透明;フォントサイズ:0;}

.tagスパン{表示:ブロック;位置:絶対; 下:-33ピクセル; 境界線のスタイル:実線 破線; 境界線の色:#FFF 透明; 線の高さ:0;}

重ね合わされた小さな三角形のスパンの底値は、border-width の値ではありません。理論的には、2 つの小さな三角形の底値の差は 2(border-width)2 の平方根になります。

最後に、後の段階で保守しやすくするためにコードを最適化しましょう。完全な HTML 構造:

CSS バブル ボックスの実装

CSS スタイルは次のように変更されました:

.tag{ 幅:300px; 高さ:5px; 位置:相対;

.arrow{ 幅:40px; 40px; 左:100px; }

; 表示:ブロック; 境界線の幅: 20px; 境界線のサイズ: 0; .arrow em {border-color:#09F 透明 透明;}

.arrow span{border-color:#FFF 透明 透明;}

以上がCSSバブルボックスの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。