css气泡式聊天框边框问题

html-css06

css气泡式聊天框边框问题,第1张

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html charset=UTF-8">

        <title>无标题文档</title>

        <style type="text/css">

            body,html{

             margin:0px

             height:100%

            }

            .autoHeight{

             width:100px

             height:100%

             background:red

            }

</style>

<style type="text/css">

 div{ background: #FFF

font-family: "微软雅黑"

top: 10%

position: absolute

left: 50%

display: inline-block

padding: 10px

border-radius: 10px

box-shadow: 1px 1px 3px rgba(0,0,0,0.2)}

  div:before {

left: -10px

top: 50%

margin-top: -6px

position: absolute

z-index: -1

content: ""

width: 0

height: 0

border-top: 8px solid transparent

border-bottom: 8px solid transparent

border-right: 11px solid rgba(0, 0, 0, 0.1)

border-left: 0

}

div:after {

left: -11px

top: 50%

margin-top: -8px

position: absolute

content: ""

width: 0

height: 0

border-top: 8px solid transparent

border-bottom: 8px solid transparent

border-right: 11px solid #FFF

border-left: 0

}</style></head>

<body style="

    background: #369

">

  <div>你好</div>

</body>

</html>

根据你的图做的,应该合适了。

1)首先想要设置聊天气泡,我们先要下载一个叫“微信聊天泡泡”的软件。 ...

2)下载完毕之后,我们打开微信,然后在聊天页面的右下方的“+”点击进去,然后在“...

3)最后在“+”中我们就可以看到“微信聊天泡泡”,然后点击打开,选择想要使用的气...