今天我们来了解一个面试中特别容易考到的一个页面效果，那就是气泡框，我们先来看看是什么样子的
标签部分
首先我们先设定一个标签，文字内容随意输入
<body> <div class="location"> Hello CSS! </div></body>
样式部分
样式部分才是关键，气泡框的三角通过伪元素 、border 实现，然后再定位到合适的位置，就可以实现相应的效果了。代码中都有详细的注释。
<style> .location{ background-color: green; color: white; display: inline-block; padding: 0 .7em; height: 2em; line-height: 2em; /*文字垂直居中*/ border-radius: 10px; position: relative; } .location::before{ position: absolute; content: ''; height: 0; width: 0; right: 10px; top: 1.5em; /* 边框大小与font-size相同 */ border-width: 1em; /* 边框为实线 */ border-style: solid; /* 顶部边框为绿色,其余都为透明,因此会有一个向下的三角形 */ border-color: green transparent transparent transparent; }</style>
