css3聊天气泡框随内容变化四周不变是怎么样做成的

html-css022

css3聊天气泡框随内容变化四周不变是怎么样做成的,第1张

ul>li{ border:1px solid #ccc  position: relative  line-height:30px}

ul>li::after,ul>li::before{ position: absolute }

 ul>li::after{right:0px bottom:0px content:"" background:url() no-repeat}

 ul>li::before{left:0px top:0px content:"" background:url() no-repeat} <ul>

<li>

曾经我以为我很完美,唯一的缺点是代码写太溜,直到有一天,一群女孩围着我说“你代码写得好溜啊!”,我说“写得溜有什么用,又没人采纳”,她们确骂我,说“你张这么帅,代码还写这么溜,哪个会不采纳你的!”

</li>

</ul>

<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)最后在“+”中我们就可以看到“微信聊天泡泡”,然后点击打开,选择想要使用的气...