CSS对话框案例
时间：08-26来源：作者：点击数：
用到了伪元素before和after
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
#test{
width: 600px;
height: 400px;
border: 1px solid;
border-radius:50%;
text-align: center;
font: 30px helvetica;
line-height: 400px;
position: relative;
}
#test:after{
position: absolute;
display: block;
content: "";
width: 80px;
height: 80px;
border: 1px solid;
bottom: -20px;
right: -20px;
border-radius:50%;
}
#test:before{
position: absolute;
display: block;
content: "";
width: 50px;
height: 50px;
border: 1px solid;
bottom: -100px;
right: -100px;
border-radius:50%;
}
</style>
</head>
<body>
<div id="test">大家好，欢迎入坑前端</div>
</body>
</html>
方便获取更多学习、工作、生活信息请关注本站微信公众号
湘公网安备 43102202000103号