代码改变世界

CSS 对话框的实现

2024-10-23 10:45  Spiderman25  阅读(27)  评论(0)    收藏  举报

https://www.cnblogs.com/shifan/p/5596025.html

第二种比较简单

直接入正题，以下是两种实现方法的html部分：

复制代码
1 <div class="one">
2     <em></em><span></span>    
3     我是第一个对话框
4 </div>
5 <div class="two">
6     我是第二个对话框
7 </div>
复制代码

第一种的CSS样式如下：

复制代码
 1 /*one CSS气泡框*/
 2 .one {
 3     position: relative; width: 300px; height: 100px; border: 3px solid #09f;
 4 }
 5 .one em, .one span{
 6     position: absolute; top: 100px; left: 20px; display: block; border-width: 15px; border-style: solid dashed dashed; 
 7 }
 8 .one em {
 9     border-color:#09F transparent transparent; 
10 }
11 .one span {
12     top: 96px; border-color:#FFF transparent transparent;
13 }
复制代码

第二种的CSS样式如下：

复制代码
/*two 使用继承*/
.two {
    position: relative; width: 300px; height: 100px; border: 3px solid #f60; background: #fff;
}
.two::after {
    position:absolute; bottom: -12px; left: 20px; padding: 8px; border:inherit; border-left: none; border-top: none; content:""; background: inherit;
 -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);
}
复制代码

从以上代码看，不容易看出第二种方法无论是从html还是从CSS看，都更简洁。第二种方法使用一个标签，运用伪类和继承。不仅简单明了，改动起来也更方便。