CSS中灵活使用:before和:after

      border:6px transparent solid;   

  }   

  .test-div:before{   

      left:-11px;   

      border-right-color: rgba(245,245,245,1);   

      z-index:1   

  }   

  .test-div:after{   

      left:-12px;   

      border-right-color: rgba(0,0,0,1);   

      z-index: 0   

  }   

</style>   

<div class="test-div"></div>  

好了，完整的一个对话框样式呈现在眼前了，至于对话框的小三角形的方向，相信大家看了上上段对于border介绍的代码也都知道该怎么做了吧，没错，就是改下position的位置，改下border显示颜色的方位~ (本兽不喜欢贴图片，体谅下额，需要的可以拷贝代码直接运行看效果，造轮子不仅仅是造轮子，也能让人加深印象，更好的理解)

2.作为内容的半透明背景层。

比如我们的需求是做一个半透明的登录框吧(这里也是在代码中通过注释来解释)：

CSS Code复制内容到剪贴板

<style>   

    body{   

        background: url(img/1.jpg) no-repeat left top /*这里本兽加了个图片背景，用以区分背景的半透明及内容的完全不透明*/  

    }   

    .test-div{   

        position: relative;  /*日常相对定位(重要，下面内容也会介绍)*/  

        width:300px;   

        height: 120px;   

        padding: 20px 10px;   

        font-weight: bold;   

    }   

    .test-div:before{   

        position: absolute;  /*日常绝对定位(重要，下面内容也会略带介绍)*/  

        content: "";  /*:before和:after必带技能，重要性为满5颗星*/  

        top:0;   

        left: 0;   

        width: 100%;  /*和内容一样的宽度*/  

        height: 100%;  /*和内容一样的高度*/  

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!