HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 36583|回复: 3

[教程] css3之气泡原理

[复制链接]
  • TA的每日心情
    奋斗
    2016-4-10 20:41
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    发表于 2015-10-22 06:31:19 | 显示全部楼层 |阅读模式
    本帖最后由 474569696 于 2015-10-22 06:31 编辑

    今天我们来讲解一下,气泡是如何用样式表绘制出来的,先上图
    QQ图片20151021215357.png
    如图所示,绘制圆角div,相信大家都会,那么左下角那个圆角是如何绘制的呢,下面我们来讲解一下具体的绘制原理。
    首先,我们用到的属性有before,after,两个
    先绘制一个圆圈,代码如下
    .qipao{
                background: #28b779;
                border-radius: 100px;
                width: 100px;
                margin: 50px 50px;
                position: relative;
                height: 100px;
            }        
    position: relative;属性,会用来控制before和after元素的层级,稍后我们来讲。
    要绘制左下角的圆角,其实不难,使用before元素在底层,after,元素在顶层,通过覆盖,来获得小圆角的。
    下面我们来看代码
    .qipao::before{
                border-radius: 0px 0px 30px 0px ;
                background: #28b779;
                bottom: -10px;
                content: "";
                height: 30px;
                left:-10px;
                position: absolute;
                width: 50px;
                z-index: -1;
            }
    如上面代码所示,绘制一个绝对定位的元素,背景未绿色;内容为空(content:"),绘制圆角的关键在于before和after元素的宽度高度控制和圆角的设置。我们设置了一个宽50,高30的长方形,然后我们来绘制一个右下角有圆角属性的长方形。去掉代码中的zindex属性,设置 border-radius: 0px 0px 30px 0px ;我们看到下方的图示
    QQ图片20151021220104.png
    通过设置border-radius属性来获得只有一个角有圆角属性的的长方形是获得第一张图效果的关键,下面我们来看after属性
    .qipao::after{
                border-radius: 0px 0px 30px 0px ;
                background: #fff;
                bottom: -10px;
                content: "";
                height: 30px;
                left:-25px;
                position: absolute;
                width: 50px;
                z-index: -1;
            }
    通过after的这只,我们再来获得一个只有右下角有圆角的长方形
    QQ图片20151021220537.png
    如图所示,看吧,被覆盖后的效果,红色显示的部分,是不是就是我们的小气泡的尾巴呢,
    最后,我们再来修改before和after的背景色,调试一下left的位置,是不是一个漂亮的小气泡就完成了呢。
    代码如下
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <style type="text/css">
            .qipao{
                background: #28b779;
                border-radius: 100px;
                width: 100px;
                margin: 50px 50px;
                position: relative;
                height: 100px;
            }        
            .qipao::before{
                border-radius: 0px 0px 30px 0px ;
                background: #28b779;
                bottom: -10px;
                content: "";
                height: 30px;
                left:-10px;
                position: absolute;
                width: 50px;
                z-index: -1;
            }
            .qipao::after{
                border-radius: 0px 0px 30px 0px ;
                background: #fff;
                bottom: -10px;
                content: "";
                height: 30px;
                left:-25px;
                position: absolute;
                width: 50px;
                z-index: -1;
            }
        </style>
        <body>
            <div class="qipao"></div>
        </body>
    </html>

    课后作业:
    1.修改before,after的border-radius属性以及宽度和高度,会获得什么的效果呢?
    2.气泡在右下角,左上角,右上角该如何设置呢?

    该用户从未签到

    发表于 2015-10-22 10:51:19 | 显示全部楼层
    留下的问题主要考校对border-radius值的理解和对相对定位、绝对定位,并不难。

    不过怎么解决在非纯色背景下气泡显示问题,还有怎么实现微信图标的那种效果。
  • TA的每日心情
    奋斗
    2016-4-10 20:41
  • 签到天数: 4 天

    [LV.2]偶尔看看I

     楼主| 发表于 2015-10-23 08:32:26 | 显示全部楼层
    simplee 发表于 2015-10-22 10:51
    留下的问题主要考校对border-radius值的理解和对相对定位、绝对定位,并不难。

    不过怎么解决在非纯色背景 ...

    你背景都非纯色了,就用psd设计一个,切出来,一切都解决了

    HTML5中国微信

    小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

    GMT+8, 2017-2-23 10:58

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表