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)是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧.该剧通过对霍 ...
随机推荐
- Tomcat通过JNDI方式链接MySql数据库
原文:Tomcat通过JNDI方式链接MySql数据库 拷贝MySQL的JDBC驱动到Tomcat的lib路径下 配置全局数据源或者单个Web应用的局部数据源 局部数据源 在Tomcat的conf/C ...
- iOS学习 plist读取和写入文件
干iOS开发时间.后经常用来plist文件, 那plist什么文件是它? 它的全称是:Property List.属性列表文件.它是一种用来存储串行化后的对象的文件.属性列表文件的扩展名为.plis ...
- Mencached使用
Mencached使用小记 该文章简单记录一下在Windows平台下安装与配置Memcached的方法,Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载. ...
- hdu 4115 石头剪子布(2-sat问题)
/* 意甲冠军:石头剪子布,目前已知n周围bob会有什么,对alice限制.供u,v,w:设w=0说明a,b回合必须出的一样 否则,必须不一样.alice假设输一回合就输了,否则就赢了 解: 2-sa ...
- Java依据Url下载图片
package com.ronniewang.downloadpicture; import java.io.DataInputStream; import java.io.File; import ...
- ExtJs在disabled和readOnly美学分析
ExtJs中disabled和readOnly美观度的分析 ExtJs中.假设设置输入框为仅仅读属性,一般第一考虑的都是readonly=true 它的效果和正常输入框一样,可是不同意输入: 然而,它 ...
- 独立博客网站FansUnion.cn操作2多年的经验和教训以及未来计划
今天,我把运营了2年的独立博客站点FansUnion给"归零"了. 2012年6月.我成功搭建了自己的博客站点FansUnion.cn,这是因为自己的不懈努力和时代发展成就的 ...
- Nyoj 城市平乱(图论)
描述 南将军统领着N个部队,这N个部队分别驻扎在N个不同的城市. 他在用这N个部队维护着M个城市的治安,这M个城市分别编号从1到M. 现在,小工军师告诉南将军,第K号城市发生了暴乱,南将军从各个部队都 ...
- C#中利用双缓冲技术解决绘图闪屏问题。
这段时间在做一个小型游戏,在界面显示的时候用到了一些图形.一开始涉及到的图形全都用控件的背景图片代替了.这样游戏运行的时候存在的一个很大的问题是游戏运行很慢.小组成员费尽周折,即将放弃,每一个成员都愁 ...
- crawler_wireshark 过滤基础知识
一.IP过滤:包括来源IP或者目标IP等于某个IP比如:ip.src addr==192.168.0.208 or ip.src addr eq 192.168.0.208 显示来源IP ...