CSS绘制无图片的气泡对话框
<div class="qipao_contianer">
<div class="qipao_content yj3">NEW</div>
<s><i></i></s>
</div>
<Style>
/*气泡框*/
.qipao_contianer
{
float:left;
font-size: 7px;
font-family: "Microsoft YaHei","微软雅黑",Helvetica,"黑体",Arial,Tahoma;
color:#fa0001;
display:block;
height:15px;
width:20px;
background-color:transparent;
*border:1px solid #eeb9bc;
}
s{
margin-top:-6px;
margin-left:-7px;
display:block;
height:0;
width:0;
font-size: 0;
line-height: 0;
border-color:transparent red transparent transparent;
border-style:dashed solid dashed dashed;
/*border-width:5px;*/
border-bottom: 2px solid transparent; /* 下边框的高 */
border-top: 2px solid transparent; /* 上方边框的高 */
border-right: 4px solid #eeb9bc; /* 左边框的长度|宽度,以及背景色 */
}
i{
margin-top:-1px;
margin-left:2px;
display:block;
height:0;
width:0;
font-size: 0;
line-height: 0;
border-color:transparent #fff transparent transparent;
border-bottom: 1px solid transparent; /* 下边框的高 */
border-top: 1px solid transparent; /* 上方边框的高 */
border-right: 3px solid #fff; /* 左边框的长度|宽度,以及背景色 */
}
.qipao_content
{
display:block;
border:1px solid #eeb9bc;
background-color:#fff;
*border-top:1px solid #eeb9bc;
*border-top:1px solid #eeb9bc;
*border-left:none;
*border-right:none;
*height:8px;
*font-variant:small-caps;
text-align:center;
width:20px;
line-height:8px;
box-shadow: 3px 3px 4px #999;
-moz-box-shadow: 3px 3px 4px #999;
-webkit-box-shadow: 3px 3px 4px #999;
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";
}
</style>
CSS绘制无图片的气泡对话框的更多相关文章
- 纯css手写圆角气泡对话框 微信小程序和web都适用
嗯……我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那种尖角的.这其中还遇上了个尴尬的问题,z-index不生效 无非就是两种方法,一种是使用图片再定位拼接起来使用,太简单了具体就不详细的说了. ...
- CSS页面重构“鑫三无准则”之“无图片”准则——张鑫旭
一.再说关于“鑫三无准则” “鑫三无准则”这个概念貌似最早是在去年的去年一篇名叫“关于Google圆角高光高宽自适应按钮及其拓展”的文章中提过.这是自己在页面重构的经验中总结出来的一套约束自己CSS的 ...
- 网站性能优化之CSS无图片技术:三角形
1.使用CSS无图片技术,可以总结得到以下三个优点: 减少请求资源的大小: 减少http的请求个数: 提高可维护性. 一.CSS无图片技术,微博中有哪些实际应用呢? 通过上面的展示,我们可以看到,无图 ...
- css实现圆角三角形例子(无图片)
css实现圆角三角形例子(无图片) 以前我们做圆角时都会要用到图片来实现,今天我给大家整理的这款css圆角效果是不需要图片的纯css实现的哦,下面我们一起来看看吧. 效果如下图所示 三角形所对方向&q ...
- CSS绘制三角形和箭头,不用再用图片了
前言 还在用图片制作箭头,三角形,那就太lou了.css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题. 先来看看这段代码: /**css*/.d1{ width: 0; he ...
- 用CSS绘制箭头等三角形图案 [译]
最近重新设计了我的网站,准备添加tooltips提示信息效果.实现很容易,但我想要让提示功能具有三角形的指示图标.当我重新思考想要所设计的每个图标颜色都随心所欲的时候,采用图片那就是一场灾难.幸运的是 ...
- CSS绘制简单图形
究竟该用字体图标.图片图标.还是CSS画一个图标?我也不知道.各有千秋吧.本文将介绍如何用css绘制简单的图形,所有测试在chrome58.0完成,如果你不能得到正确结果请到caniuse查一查看看是 ...
- css绘制三角形原理
1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...
- 碉堡了! 纯 CSS 绘制《辛普森一家》人物头像
这篇文章给大家分享一组纯 CSS 绘制的<辛普森一家>人物头像.<辛普森一家>(The Simpsons)是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧.该剧通过对霍 ...
随机推荐
- MAX2323E - 原理图系列
在本实施例MAX2323E(3.3V)采用LPC1752驱动器. 一.截图 文件备份:sch20110723.7z 版权声明:本文博主原创文章.博客,未经同意不得转载.
- 网络资源(1) - Hadoop视频
2014_08_23: hadoop03c_分布式文件系统HDFS http://v.youku.com/v_show/id_XNDgwNjg1OTY0.html?f=18604686 2014_08 ...
- 为什么数据线easy糟糕
一个好的设计可以帮助解决问题似乎无关紧要豪. 两天前M3数据线被破坏.在弯附近的电话插口可以充电.一松就充不了电了. 今天突然想到每次充电的时候用手机发信息.玩游戏都特别不方便,才想到为什么数据线ea ...
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(19)-用户信息的修改和浏览
原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(19)-用户信息的修改和浏览 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框架搭建 ...
- Unity3D专访——真正的面试
本来想写一系列的,一半的攻击,现在面试的水.人之奸,用大哥的话说,要走新手是做螺丝钉和抹布用的.还有一半是对出出学校的或者是自废武功转3d的朋友们提供一个比較有价值的參考. 只是我时间实在仓促.没有保 ...
- java基金会 之 HashMap统计csvWord文档
一:知识的补充( 这个HashMap Map 和 c++的Map还是有非常大的区别,惊人的差异大的人,当然,两者的作用是相同的,但函数名出一个非常大的.即使iterator的差是非常大的 ) (1)H ...
- 关于小改CF协同过滤至MapReducer上的一些心得
至上次重写ID3 MR版之后,手贱继续尝试CF.之前耳闻CF这两年内非常火,论内某大神也给了单机版(90%代码来自于其).所以想试试能否改到MR上.整体来说,CF本身的机制以相似性为核心,与迭代调用几 ...
- Objective-c中的单例
单例是指静态分配的实例,就是只开辟一块内存,不会重新开辟内存,而 iphone sdk 中全是这种实例,例如[UIApplication sharedApplication] 返回一个指向代表应用程序 ...
- C语言库函数大全及应用实例二
原文:C语言库函数大全及应用实例二 [编程资料]C语言库函数大全及应用实例二 函数名: bioskey 功 能 ...
- Java对象比较器对泛型List进行排序-Demo
针对形如:字段1 字段2 字段3 字段n 1 hello 26 7891 world 89 5562 what 55 4562 the 85 452 fuck 55 995 haha 98 455 以 ...