CSS小技巧之:after和:before制作小气泡框体-智言个人博客

最近好像特别迷恋使用这些小技巧。反正闲来无事，就随便研究研究前端这些东西。发现越发的喜欢啊。

首先申明，代码均未做优化处理等。

直接上代码：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Demo-css3</title>
 <style media="screen">
 body{margin: 0; padding: 0;}
 /*第一个气泡demo*/
 .demo,.demo2{
 background-color: #3c9;
 padding: 8px;
 display: inline-block;
 position: relative;
 left: 15px;
 top: 5px;
 z-index: 99;
 color: #fff;
 font-weight: 100;
 font-size: 14px;
 }
 .demo::before{
 content: '';
 display: inline-block;
 position: absolute;
 width: 20px;
 height: 15px;
 background-color: #3c9;
 border-top-right-radius: 10% 50%;
 border-top-left-radius: 100% 50%;
 top: 10px;
 left: -15px;
 z-index: 1;
 }
 .demo::after{
 content: '';
 display: inline-block;
 position: absolute;
 border-top-left-radius: 50% 50%;
 border-top-right-radius: 50% 50%;
 width: 25px;
 height: 15px;
 background-color: #fff;
 top: 15px;
 left: -25px;
 z-index: 2;
 }
 /* 第二个气泡demo*/
 .demo2{
 background-color: #fff;
 margin-top: 20px;
 border: 1px solid #f66;
 color: #333;
 font-weight: 400;
 }
 .demo2::before{
 content: '';
 position: absolute;
 width: 0;
 height: 0;
 border-right: 10px solid #f66;
 border-top: 6px solid transparent;
 border-bottom: 6px solid transparent;
 left: -10px;
 top: 11px;
 }
 .demo2::after{
 content: '';
 position: absolute;
 width: 0;
 height: 0;
 border-right: 10px solid #fff;
 border-top: 6px solid transparent;
 border-bottom: 6px solid transparent;
 left: -8px;
 top: 11px;
 }
 </style>
 </head>
 <body>
 <div class="demo">
 我是一个气泡，我有很多CSS3属性，希望大家可以支持我，谢谢大家了。
 </div>
 <div></div>
 <div class="demo2">
 我是第二个气泡，我也有很多CSS3属性！
 </div>
 </body>
</html>

DEMO地址：https://www.asni.cn/demo/demo3/index.html