【每日一学】用css3做了个对话框效果

作者：天空2016.12.22来源：Web前端之家浏览：16726评论:0

关键词：CSS3

用css3做了个对话框效果，感觉不错，昂可是个新手哟。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>对话</title>
<style>
  div{ width:800px;
      height:23px;
      line-height:23px;
      text-align:center;
      font-size:14px;
      border:1px solid red;
position: relative;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
 background:#fff;
      }
  div:before {
    content:"";
    position: absolute;
    right:-6px;
    top: 7px;
    width: 8px;
    height: 8px;
    background:#fff;
    border-bottom:1px solid red;
    border-left:1px solid red;
    transform:rotate(225deg);
   -webkit-transform:rotate(225deg)    } 
    </style>
</head>
<body>
  <div>Web前端之家，这个网站错的不错，可以加入交流群295431592</div>

赏您的支持是我们创作的动力！