javascript - css3聊天气泡框随内容变化四周不变是怎么样做成的
PHP中文网
PHP中文网 2017-04-11 11:37:39
[JavaScript讨论组]

聊天框随内容撑大,但是左下角和右上角的不变是怎么样做成的;

PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(7)
高洛峰
<p>发的开发力度<br>发的开发力度<br>发的开发力度<br>发的开发力度<br>发的开发力度<br>发的开发力度</p>
p {
  position: relative;
  padding: 10px;
  background: yellow;
  border-radius: 10px;
  width: 200px;
  margin: 30px auto;
}
p:after {
  width: 10px;
  height: 10px;
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  background: red
}
p::before {
  width: 10px;
  height: 10px;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  background: blue
}
怪我咯

css的position属性,改成relative或者absolute,然后再用top, left, right, bottom定位。

PHP中文网

可以考虑下border-image

ringa_lee

我认为是这个图片的定位,它应该是把这个聊天这个块级内容当成祖先元素,图片根据祖先元素进行定位,通过 top bottom left right 进行定位,不管聊天框有多大,这个图片一直在聊天的四个位置,图片不变化,可以设置图片的大小

黄舟

聊天窗口本身有个position:relative,四个角上采用绝对定位,这样,无论内容这么变化,四个角依旧在那里,位置不变。至于四个角是采用before,after伪类来写,还是采用单独的标签来写,见仁见智

怪我咯

css3支持多个背景图片

大家讲道理

精通CSS里有个图片门可以实现,但是会有一些些多标签。after和before也可以做

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号