[代码收集]CSS灰色气泡消息提示窗口代码(左下尖角/拟物化背景) - 笑忘书网页代码收藏馆 - 35230.WODEMO.COM

首页-代码 2014-01-24 06:30:13 -0500

★CSS灰色气泡消息提示窗口代码(左下尖角/拟物化背景)★

请勿抄袭本页面

代码说明

CSS写的气泡消息提示，背景图片用的是base64编码的png图片数据，节省了HTTP请求，但代码相对多了点。代码采自腾讯微博

html代码

<style>
.c1{position:relative;border-width:0 5px;padding:5px;margin:auto 8px;
margin-bottom:10px;text-align:justify;-webkit-border-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAABECAYAAACF8sXHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkUwMTg1MTEzMUI0QjExRTM5OEIzRDFBQUJBMDI0NEE3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkUwMTg1MTE0MUI0QjExRTM5OEIzRDFBQUJBMDI0NEE3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTAxODUxMTExQjRCMTFFMzk4QjNEMUFBQkEwMjQ0QTciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTAxODUxMTIxQjRCMTFFMzk4QjNEMUFBQkEwMjQ0QTciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7MvYF3AAAC7UlEQVR42uxYT4gSURh/M/5l3V3Nwxiy7SUKggJl6aAngwLpYBTC0qVbu2y3bqGQl2Bv7WEJoWUr6OrFYwjSQTwXeqhLSNsiCKKzrquuo/Z+r3li4Wwu/oEpP/hw5s17v/f7fu97b8ZPIL+bAM9ms7dFUdyg1zcEQbhKNKzb7e60Wq29QCDwRW3qDQL1f5PJpEOSpFcU9CEZ3RqdTue53+9/qQL3+gxxkUqlri0tLaUoQzcFJk6nkywvLxOz2ayJWCwWiSzLv6j2eh/S6fT9SCTSxC0DjsfjNq/X+4mCXl5cXCQul4uYTKaR6NZqNVIqlUi73YY0uz6f7ylUArAhk8k8o0AvbDYbWVlZwezoRGiIzLXMYrEQREd1JoVCAU2dSqVyMxgMfhbpjWgwGJ4AzOFwMCBFUcjp6emZoDD0AVNEZ7fbQchAI34MTDGRSFyBrtDSarX2mY5iIANHf6wHYYjiLcgr0hlW0UBZs058wKjGSWA8ywZBuMTwKciC2kDGMWit4tgYYzrjeIjDTTD+qdl5pdDqL5LpmDAtYGLkKXPe8P8mie40ngOT6S+ecfCUmmS66U+KeboNP4TG1XgmWTH9dJuEFLNdvEnY7Lf0WZr9Rwf9pNNNx1mhm52nvy0911jH3xXzvwr/yifWuO88fX9izbf0DLa0oijNcQ561JJ4nU4dW2dSyLL8HReotQ12HtV49YpXs+gEP4Avbm5ufqOzlADcaDTYw1HLjyDAq1dHR0dEJZjhi9er1+uvBx/CUODjbLSME0C18Pj4mBE/ODh4C0yMNNJZcx6P5wEN5wI6oWIIJnCAazns5OSElMtlpnGz2Xy/vr7+DhPgqSGXyylra2tZSZLu0VAWaARsQTCYhzrMAFitVhkoJfQxFottHB4etgCMVTKpG8W0tbV1MRQK7VgslrvnSLFmpVLZDofDu1AFMsNZmVd1I/f9/f07brf7EdXwOmW8qgVaq9X28vn8m2g0+pUDqt75KcAAT9MRtQLfw6EAAAAASUVORK5CYII=) 0 10}
.c1:after{content:'.';position:absolute;left:12%;bottom:-17px;width:17px;height:18px;background-size:18px 18px;font-size:0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIzNDdCQUUzRTc5ODExRTI4MkVGQTYwNUQxNTkzMkU3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIzNDdCQUU0RTc5ODExRTI4MkVGQTYwNUQxNTkzMkU3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjM0N0JBRTFFNzk4MTFFMjgyRUZBNjA1RDE1OTMyRTciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjM0N0JBRTJFNzk4MTFFMjgyRUZBNjA1RDE1OTMyRTciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5SMwueAAABLUlEQVR42oySTWqFMBSFYyyOSodO3YurKP0RVNAldAtdQYdOiyPnbV2JExEciaKoA9/TpIkkIdWQ1wuHBJLveHOuBsYYpGn6Ztv2u+M4gNa6rgAhBCzLAryGYQB93+/7oiieoij6pHsIpJrneV8hhH/gtm2V8MlgWRZhIMPTNAHS6fUICwPytXu6GoZBLwrJcFmWr3Ecf4FDQQI9EOHjQdd1Aq6q6iUMQwpfj/fuiDbTNJEO9n2fwhvNV2lA3oxvwCvTpjIQMB2dBqZCKgMR2jiOAg6CQAWfsoIsfX5w0cF5nmNlBxyu6/qZwN9SYFpYZEDq0jTNo+d5PwzY/gMLgyRJPrIs4zPmBjfh/flEJsvCYCFhHey67smAw0BKGasS5xNT/QfHy9q25foVYABz+/vkV43BWgAAAABJRU5ErkJggg==);background-repeat:no-repeat}
</style>
<div class="c1">
笑忘书网盘-网页代码收藏馆 (35230.wodemo.com) 搜集网页代码，分享各类精品资源，更多精彩内容等待你来浏览
</div>

代码演示

笑忘书网盘-网页代码收藏馆 (35230.wodemo.com) 搜集网页代码，分享各类精品资源，更多精彩内容等待你来浏览

[代码仅供参考，转载请注明出处]

----Comments(2)----
csngmap (@csngmap) | @ at 2014-02-16 03:47:
代码太长了，改天电脑转

csngmap (@csngmap) | @ at 2014-02-16 03:34:
转了，谢谢分享

Subscribe | Register | Login | N