CSS3绘制气泡提示框

来源：互联网发布：pr软件是什么意思编辑：程序博客网时间：2024/05/18 00:05

效果图：

html代码：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style type="text/css">        .tag {            width: 100px;            height: 22px;            border: 1px solid Gainsboro;            position: relative;            background-color: #F9F5C7;            font-size: 8px;            text-align: center;            line-height: 20px;            border-radius: 4px;        }            .tag:before, .tag:after {                content: "";                display: block;                border-width: 10px;                position: absolute;                bottom: -20px;                left: 30px;                border-style: solid dashed dashed;                border-color: Gainsboro transparent transparent;                font-size: 0;                line-height: 0;                text-align: center;            }            .tag:after {                bottom: -19px;                border-color: #F9F5C7 transparent transparent;            }    </style></head><body>    <div class="tag">        为了部落！    </div></body></html>

0 0