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; 높이:100px; 테두리:5px 솔리드 #09F; 위치:상대;}

.tag em{display:block-width:20px; 위치:절대; 하단:-40px; 왼쪽:100px;테두리-스타일:실선 점선:#09F 투명 투명;글꼴-크기:0;}

6.

이제 방향을 나타내는 삼각형 화살표는 솔리드이고 여기서는 배경색과 동일한 색상으로 작은 삼각형을 오버레이합니다. 버블 상자를 클릭한 다음 겹쳐진 작은 삼각형의 위치를 ​​이동하여 이를 달성합니다.
우선 HTML 구조를 다음과 같이 조정해야 합니다.

CSS 버블 상자 구현

CSS 스타일 수정:

.tag{ width:300px; 5px 솔리드 #09F; 위치:상대적; 배경색:#FFF;}

.tag em{display:block; border-width:20px; 하단:-40px; border-style:solid dashed dashed; border-color:#09F transparent transparent;font-size:0;}

.tagspan{display:block-width:20px; 위치:절대; 하단:-33px; 왼쪽:100px;테두리-스타일:실선 점선; 테두리-색상:#FFF 투명 투명;글꼴-크기:0;}

참고: 겹쳐진 작은 삼각형 범위의 아래쪽 값은 border-width 값이 아닙니다. 두 개의 작은 삼각형 아래쪽 사이의 차이는 이론적으로 2(border-width) 제곱근 2여야 합니다.

마지막으로 나중에 관리하기 쉽도록 코드를 최적화해 보겠습니다. 전체 HTML 구조:

;

CSS 버블박스 구현

CSS 스타일은 다음과 같이 수정됩니다:

.tag{ width:300px; height:100px; border:5px solid #09F; position: background-color:#FFF;}

.arrow { 위치:절대:40px; 하단:-40px; }

.arrow *{ 디스플레이:블록; 테두리 스타일 :실선 점선; 글꼴 크기:0; 줄 높이:0; }

.arrow em{border-color:#09F transparent transparent;}

.arrow span{border- 색상:#FFF 투명 투명;}

위 내용은 CSS 버블박스 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!