CSS中“边框法”的高级应用(所有可遇到的聊天气泡)

一、说是高级应用,准确讲应该是“复杂应用”。就是说用两个标签(或无标签 – 使用:before与:after伪类)形成的两个不同的边框进行组合显示实现的一些效果。

看下面两个图,本单元就是要实现下面两种效果:
边框法复杂应用 张鑫旭-鑫空间-鑫生活
边框法复杂应用实现的效果 张鑫旭-鑫空间-鑫生活

1、效果(1)
CSS代码如下:

.test{width:300px; padding:30px 20px; margin-left:60px; background:#beceeb; position:relative;}
.test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.test span.bot{
    border-width:20px; 
    border-style:solid; 
    border-color:#ffffff #beceeb #beceeb #ffffff; 
    left:-40px; 
    top:40px;
}
.test span.top{
    border-width:10px 20px; 
    border-style:dashed solid solid dashed; 
    border-color:transparent #ffffff #ffffff transparent; 
    left:-40px; 
    top:60px;
}
                

HTML代码如下:

<div class="test">
    <span class="bot"></span>
    <span class="top"></span>
    CSS “边框法”实现气泡对话框效果一
</div>

效果图:


2、效果(2)
CSS代码如下:

.test{width:300px; padding:30px 20px; border:5px solid #beceeb; position:relative;}
.test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.test span.bot{
 border-width:20px; 
    border-style:solid dashed dashed; 
    border-color:#beceeb transparent transparent; 
    left:80px; 
    bottom:-40px;
}
.test span.top{
    border-width:20px; 
    border-style:solid dashed dashed; 
    border-color:#ffffff transparent transparent; 
    left:80px; 
    bottom:-33px;
}                

HTML代码如下:

<div class="test">
    <span class="bot"></span>
    <span class="top"></span>
    CSS “边框法”实现气泡对话框效果二
</div>

效果如下:


3、效果原理简述
原理的关键字就是“覆盖”,另外一个边框形成的尖角覆盖之前的一个,只要控制好覆盖的位置,然后就形成了实际上的不规则尖角或是尖角边框。您还可以发挥您的创造力,实现更多其它的效果。

四、关于“边框法”的一些说明

关于“边框法”,有一些知识必须要提一下。

1. IE6的奇偶bug
如果定位外框高度或是宽度为奇数,则IE6下,绝对定位元素的低定位和右定位会有1像素的误差。所以,尽量保证外框的高度或宽度为偶数值。

2. IE6的空div莫名高度bug
IE6下,空div会有莫名的高度,也就是说height:0;不顶用,此时形成的尖角的实际占高于其他浏览器是有差异的。可使用font-size:0; + overflow:hidden;修复此问题。

3. IE6不支持实线边框透明transparent属性
IE6不支持实线边框透明transparent属性,当某边框设置为transparent属性,且有宽度的话,那么透明会以默认的黑色显示的。解决方法有两个,一是将需要隐藏的颜色设置为背景色,这样与透明效果一样,此法有局限性,在复杂“边框法”应用下是行不通的;二是可以使用dashed代替solid,可以实现IE6下边框transparent透明。为什么能够实现透明?您可以参考默尘的这篇文章Dotted&Dashed终极分析及IE6透明边框,我说点题外话,其对原因的解释似乎说的通,但是,是不是如此,我是相当怀疑的,我尚未有时间验证,这个可以标记一下。

五、利用CSS3实现气泡样式的对话框

之前我们所说的一切,是全兼容现在所有主流浏览器的。而这里的方法,只支持对CSS3支持良好的浏览器,例如Firefox3.5+,chrome以及Safari。本文一开头的那张黄黄的大图就是使用的CSS3实现的圆形以及圆弧状的拐角尾巴。

效果的核心就是CSS3的圆角属性:border-radius,例如开始的大尾巴图片,就是使用border-radius实现的三个圆组成的,大圆形成主体内容,两个小一点的圆相互遮盖,形成圆弧小尾巴,但这个不具体讲,现在,以一个相对简单点的例子做示例。

CSS代码如下:

.test{
    width:300px;
    padding:80px 20px;
    margin-left:100px;
    background:#beceeb;
    -webkit-border-top-left-radius:220px 120px;
    -webkit-border-top-right-radius:220px 120px;
    -webkit-border-bottom-right-radius:220px 120px;
    -webkit-border-bottom-left-radius:220px 120px;
    -moz-border-radius:220px / 120px;
    border-radius:220px / 120px;
    position:relative;
}
.test span{width:0; height:0; font-size:0; background:#beceeb; overflow:hidden; position:absolute;}
.test span.bot{
    width:30px;
    height:30px;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    left:10px;
    bottom:-20px;
}
.test span.top{
    width:15px;
    height:15px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    left:0px;
    bottom:-40px;
}

HTML代码如下:

<div class="test">
    <span class="bot"></span>
    <span class="top"></span>
    CSS3 border-radius实现气泡对话框效果 
</div>

最后的效果如下图:
CSS3 border-radius实现的思考泡泡框效果 张鑫旭-鑫空间-鑫生活


实现另一个类型的聊天气泡,没有边框的聊天气泡(没用用到边框,直接用背景颜色来弄,相对简单)


复制代码
代码如下:

<div class="arrow"></div>
<style type="text/css">
.arrow {
width:0;
height:0;
font-size:0;
border:solid 10px #000;
}</style>

这儿,我们可以得到一个黑色的正方形,其实这是边框组成的,因为div的宽度和高度都是0,。那么,我们具体来看看,div宽度和高度都是0时,它的上下左右四边框都是怎样的,下面我们把边框的各边颜色分别设置为不同颜色:


复制代码
代码如下:

<div class="arrow"></div>
<style type="text/css">
.arrow {
width:0;
height:0;
font-size:0;
border:solid 10px;
border-color:#f00 #0f0 #00f #000;
}
</style>

我们发现,原来当div的宽度和高度都是0的时候,它的整个边框是由四个三角形组成的,每一边为一个三角形,那么我们就可以利用这个特点,来做可爱的小尖角了。我们只要把不需要的三边的边框(三角形)的颜色设置为与背景相同即可,这样就只能看到你想要的那个三角形了,然后再利用定位调整一下位置就可以了。具体代码如下所示:


复制代码
代码如下:

<div class="send">
<div class="arrow"></div>
</div>
<style type="text/css">
body {
background:#4D4948;
}

.send {
position:relative;
width:150px;
height:35px;
background:#F8C301;
border-radius:5px; /* 圆角 */
margin:30px auto 0;
}

.send .arrow {
position:absolute;
top:5px;
right:-16px; /* 圆角的位置需要细心调试哦 */
width:0;
height:0;
font-size:0;
border:solid 8px;
border-color:#4D4948 #4D4948 #4D4948 #F8C301;
}
</style>

大功告成,效果如下图:


另个是用border的边框来实现,而且可以很好的控制箭头在右边框的位置,不需要自己一点点的调试

直接代码附上:

html:

<div class="send">
    你好呀!!
    <div class="arrow"></div>
</div>
CSS样式

   .send {
        position:relative;
        width:150px;
	padding:10px 10px;
        height: auto;
        min-height: 50px;
        /*background:#F8C301;*/
        border:5px solid orange ;
        border-radius:5px; /* 圆角 */
        margin:30px auto 0;
    }

    .send .arrow {
        position:absolute;
        /*下面是为了其位置进行初始化,可以很快的控制位置,不需要一点点的调试*/
        top:10px;
        right: 0px;
        z-index: 40;
        right:-14px; /* 圆角的位置直接是width的一半加上border的宽度。这样效果可以 */
        width:17px;
        height:17px;
        background-color: white;
        /*只显示上边框和右边框,然后旋转*/
        transform: rotate(45deg);
        border-top:solid 5px orange;
        border-right: 5px solid orange;
    }

最终效果图:


部分参考:张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果您想要制作一个好看的聊天气泡效果,可以参考以下CSS代码: ```css /*气泡*/ .pop { position:relative; width:100px; height:35px; line-height: 33px; color:#fff; border-radius:5px; /* 圆角 */ background-color: #4D4948; border:1px solid #4D4948; text-align: center; margin-right: 30px; } /*尖角在左侧*/ .pop .arrow { position:absolute; top:5px; left:-16px; /* 圆角的位置需要细心调试哦 */ width:0; height:0; font-size:0; border:solid 8px; border-color:#fff #4D4948 #fff #fff; } ``` 这段CSS代码会创建一个宽度为100px,高度为35px的聊天气泡。通过设置背景颜色、边框样式和圆角的属性,可以使气泡看起来更漂亮。另外,通过调整尖角的位置和样式,可以使气泡看起来更加立体和生动。您可以根据自己的需求进行调整,例如改变背景颜色、边框颜色和尖角的大小等。 希望以上内容对您有所帮助!<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [CSS实现聊天气泡效果](https://blog.csdn.net/qq_45457134/article/details/121512675)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [Q定制云印刷在线DIY定制系统 v5.0 - PHP在线DIY定制系统下载](https://download.csdn.net/download/weixin_36643308/88248678)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值