css3效果对话

最新推荐文章于 2021-04-28 16:02:44 发布

Cokeny.

最新推荐文章于 2021-04-28 16:02:44 发布

阅读量168

点赞数

分类专栏：前端文章标签： css3 静态效果

前端专栏收录该内容

15 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>talk</title>
<style type="text/css">
div {
	position: relative;
	width: 500px;
	height: 300px;
	border: 1px solid black;
	border-radius: 50%;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	line-height: 300px;
}
div:before,
div:after {
	position: absolute;
	content: "";
	display: block;
	border: 1px solid black;
	border-radius: 50%;
}
div:before {
	width: 50px;
	height: 50px;
	bottom: -25px;
	right: 25px;
}
div:after {
	width: 20px;
	height: 20px;
	bottom: -50px;
	right: 0;
}
</style>
</head>
<body>
	<div>您好！欢迎来到XXXXXXXXXX</div>
</body>
</html>