CSS 怎么写出对话气泡的小尖角？像 iMessage 那样的气泡尖角。

[islujw]

用 CSS 写对话气泡，其中小尖角希望和 iMessage 一样，然而似乎有些困难，网上也都是微信那种尖角。

大家有什么建议嘛……

[geelaw]

@islujw 喵，我的方法不需要用 border，我用 before 和 after 创造两个圆角矩形剪切得到的小尾巴。

[islujw]

@geelaw 嗯，明白～竟然还为气泡间的时间间距测量了精确的像素(｡ì _ í｡)

[lxy42]

学习了

[joyqi]

其实如果你不想用弧度的话，完全可以用 before 和 after 的伪类画一个出来，不需要图片

比如这样
https://jigu.im/hello

[geelaw]

@islujw 大小是胡写的，看起来像而已。

[ffkjjj]

@Tonni 请问 CSS 代码中 :before 前面的 & 有什么作用？

[Tonni]

@ffkjjj 这是 SCSS 的写法： http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector

[islujw]

@Tonni 基于那份代码，渐变效果已在 Mac Safari 上成功实现。但 iOS Safari 不支持 background-attachment: fixed; 特性，导致渐变色被固定在每个元素，不能根据位置而变化，这个还有解决的希望嘛……

[islujw]

@geelaw iOS Safari 不支持 background-attachment: fixed; 特性……

[geelaw]

@islujw 啊那你可以选择在 iOS Safari 上不使用渐变，还可以 fallback 到纯色

[islujw]

@geelaw Hmm …没有什么曲线救国的办法的话，嗯……似乎也只能这样了。不知道 Android 是否支持。

[ffkjjj]

@Tonni 了解了，非常感谢

[islujw]

@geelaw 怎么让 iOS 和 macOS 的 Safari 区别用色呢？没成功诶，iOS 上总是以预先分布好的渐变示人……

[geelaw]

@islujw 被你坑了。iOS 10 的 Safari 命名可以得到正确的效果。如下三张图是从顶部滚到底部的结果（增加了很多条信息、改变了渐变色便于观察）

[islujw]

@geelaw 「 iOS 10 的 Safari 命名」是什么意思？

[geelaw]

@islujw *明明

[islujw]

@geelaw 1. 你是如何在手机上滚动这块页面的？我增加了对话、改变了颜色后，整个网页被撑高了，滑动是滑动整个网页，而非仅限于这个区块内。2. 我在自己网页上实现后，的确无法实现。3. 能搜出大量关于 iOS Safari 不支持此特性的讨论。你截图中的是 iOS Safari 实现的还是那个网站给的运行环境实现的呢？

[geelaw]

@islujw 放进一个 div 里面，那个 div 设置高度和滚动条。

[islujw]

@geelaw 经过测试，在 JSFiddle 和自己的网页上，为区块设置固定高度和滚动条 {max-height: 300px; overflow: scroll; } 可以让 iOS Safari 将背景固定住，达到效果。但从浏览体验出发，不可以这么设定。然而，在页面自然滚动状态下，就无法达成效果了。为了弄清楚背景图究竟是如何定位的，将颜色替换为图片，发现是以整个页面长度（而非屏幕高度，亦非第一个和最后一个气泡的高度差）为填充高度。

[geelaw]

@islujw 那你可以把整个页面套进一个 div 里面，让这个 div 具有 100vh、100vw 和滚动条，并禁止 body、html 之滚动条