CSS如何实现一个对话框

最新推荐文章于 2024-06-28 09:43:34 发布

WanDerEr950921

最新推荐文章于 2024-06-28 09:43:34 发布

阅读量1.4k

点赞数 3

分类专栏：对话框书写文章标签： CSS

原文链接：https://www.cnblogs.com/jiguiyan/p/11260012.html

版权

对话框书写专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS如何实现一个对话框

步骤：

1.三角形的实现：

效果图如下：
在这里插入图片描述初始效果的源代码：

<head>
    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title> perfect*</title>
    <style>
        .tr{
            width:0;
            height:0;
            border: 50px solid;
            border-color: #f00 #0f0 #ccc #00f;
            
        }
    </style>
</head>
<body>
    <div class="tr"></div>
</body>

Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容，这实际上破坏了“锁定”模式。即如果你有IE9的话说明你有IE789，那么就调用高版本的那个也就是IE9。

X-UA-Compatible是针对IE8新加的一个设置，对于IE8之外的浏览器是不识别的，这个区别与content="IE=7"在无论页面是否包含<!DOCTYPE>指令，都像是使用了 Windows Internet Explorer 7的标准模式。而content="IE=EmulateIE7"模式遵循<!DOCTYPE>指令。对于多数网站来说，它是首选的兼容性模式。

border-color：{1,4}
默认值：看每个独立属性
相关属性：[ border-top-color ] || [ border-right-color ] || [ border-bottom-color ] || [ border-left-color ]

说明：

设置或检索对象的边框颜色

如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上、下，第二个用于左、右。
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
如果border-width等于0或border-style设置为none，本属性将被忽略。
对应的脚本特性为borderColor。

最终实现的效果：
在这里插入图片描述将上述源代码中的border-color改为：
border-color: transparent transparent #ccc transparent;//上、右、下、左
transparent为默认值，边框颜色为透明的

现在使用三角形进行来进行制作对话框：

对话框最终效果：
在这里插入图片描述对话框最终的代码：

<head>
    <meta charset="utf-8" />
    
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title> perfect*</title>
    <style>
        /*.tr{
            width:0;
            height:0;
            border: 50px solid;
            border-color: transparent transparent #ccc transparent;
            
        }*/
        
        .ts{
            position: relative;
            margin-top: 50px;
            margin-left: 50px;
            padding-left:20px ;
            width: 300px;
            line-height: 2;
            background:blueviolet;
            color: #fff;
        }
        .ts::before{
            
            content:'';
            position: absolute;
            border: 8px solid;
            border-color: transparent blueviolet transparent transparent;
            left: -16px;
            top: 8px;
        }
    </style>
</head>
<body>
    <div class="ts">这是一个对话框！！</div>
</body>

:before 选择器在被选元素的内容前面插入内容。

博文取自：https://www.cnblogs.com/jiguiyan/p/11260012.html