本文介绍如何使用CSS实现微信聊天窗口的效果，包括设置对话框的大小、位置及背景颜色，并通过伪元素创建对话框旁边的小三角形。
与伪类一样，是重要的知识，需要掌握，能够实现诸如微信聊天窗口，登录窗口模糊背景等效果。
微信聊天窗口效果,代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>mission8</title>
<link rel="stylesheet" href="index.css" type="text/css">
<style>、
/*通配符取消页面默认的padding与margin，并设置盒子模型的相关显示*/
*{
padding:0;
margin:0;
box-sizing:border-box;
position:relative;
}
/*设定主题对话框的大小与相关效果*/
.test{
width:100px;
height:30px;
margin:auto;
border: 1px solid;
background-color: #95fff5;
}
/*设置聊天框旁边的小三角形*/
.test:before{
content:"";
position:absolute;
width: 0;
height:0;
border:6px solid transparent;
border-right-color:#95fff5;
top: 50%;
left:-12px;
margin-top:-6px;
z-index:1;
}
/*设置小三角形的border*/
.test:after{
content:"";
position:absolute;
width: 0;
height:0;
border:6px solid transparent;
border-right-color:black;
top: 50%;
left:-13px;
margin-top:-6px;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
微信聊天窗口效果,代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>mission8</title>
<link rel="stylesheet" href="index.css" type="text/css">
<style>、
/*通配符取消页面默认的padding与margin，并设置盒子模型的相关显示*/
*{
padding:0;
margin:0;
box-sizing:border-box;
position:relative;
}
/*设定主题对话框的大小与相关效果*/
.test{
width:100px;
height:30px;
margin:auto;
border: 1px solid;
background-color: #95fff5;
}
/*设置聊天框旁边的小三角形*/
.test:before{
content:"";
position:absolute;
width: 0;
height:0;
border:6px solid transparent;
border-right-color:#95fff5;
top: 50%;
left:-12px;
margin-top:-6px;
z-index:1;
}
/*设置小三角形的border*/
.test:after{
content:"";
position:absolute;
width: 0;
height:0;
border:6px solid transparent;
border-right-color:black;
top: 50%;
left:-13px;
margin-top:-6px;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
扫一扫
1610
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
