天高云淡，让心情旅行。 注册 | 登陆

CSS泡泡聊天效果.无需任何图片

Submitted by koyoz on 2010, March 29, 13:45 PM. CSS

以下效果,无需任何图片.

大小: 18.03 K 尺寸: 479 x 500 浏览: 20 次 点击打开新窗口浏览全图

只要能支持CSS2.1即可.部分效果需要CSS3支持.

利用Mozilla -moz- 特有属性, webkit的 -webkit- 特有属性.完成圆角和渐变的效果.

CSS3中的 border-radius 和 transform 完成特殊边角和渐变效果.

伪类 :after,:before 来制作无需html的突出小角. 不过IE是看不到什么效果了. 用Firefox和Chrome都能看到全效果.

看DEMO: http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html

原文链接: http://nicolasgallagher.com/progressive-enhancement-pure-css-speech-bubbles/

 

Tags: css

« 上一篇 | 下一篇 »

只显示8条记录相关文章

[转]一套HTML,CSS,JavaScript的简易规范说明 (浏览: 1012, 评论: 0)
cursor 光标属性示例 (浏览: 1006, 评论: 1)
[转]如何书写高效、可维护、组件化的CSS的演示文档 (浏览: 874, 评论: 0)
很详细的CSS3手册 (浏览: 866, 评论: 0)
两套Reset CSS (浏览: 1857, 评论: 2)
CSS中em和px单位的区别 (浏览: 1695, 评论: 0)
优化CSS的网页渲染速度的11种方法 (浏览: 1395, 评论: 0)
CSS中定义优先权 (浏览: 1387, 评论: 0)

发表评论

评论内容 (必填):