CSS绘制气泡提示框

最新推荐文章于 2021-08-04 01:26:09 发布

Jaye-L

最新推荐文章于 2021-08-04 01:26:09 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签： css 气泡

本文链接：https://blog.csdn.net/hoopmac/article/details/46888449

版权

本文介绍如何利用CSS技术来绘制各种类型的气泡提示框，包括但不限于箭头方向的控制、内边距和外边距的调整以及背景颜色和文字样式等。通过实例代码，展示了如何实现一个美观且实用的气泡提示效果。

摘要由CSDN通过智能技术生成

效果图：

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;