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)是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧.该剧通过对霍 ...
随机推荐
- B/S 类项目改善
B/S 类项目改善的一些建议 要分享的议题 性能提升:在访问量逐渐增大的同时,如何增大单台服务器的 PV2 上限,增加 TPS3 ? RESTful:相较于传统的 SOAP1,RESTful 风格 ...
- mysql导出和导入命令更改数据库名称数据库
概要 mysql 数据库导入和导出,有两种方法 1)从试点SQL脚本.导入(导入导出又分两种:1. 命令. 2. 工具.这里我们仅仅介绍命令). 2)直接拷贝数据库文件(此方法不推荐). 一.mysq ...
- Session or Cookie?是否有必要使用Tomcat等一下Web集装箱Session
Cookie是HTTP协议标准下的存储用户信息的工具.浏览器把用户信息存放到本地的文本文件里. Session是基于Cookie实现的. 2011年4月,武汉群硕面试的时候(实习生).面试官也问过这个 ...
- 乘法逆元...Orz
最近打的几场比赛,都出现了有关逆元的题目,今天就整理了一下... 求乘法逆元的几种方法:http://www.cnblogs.com/james47/p/3871782.html 博文转载链接:htt ...
- unity脚本运行顺序具体的解释
unity脚本自带函数执行顺序例如以下:将以下脚本挂在随意物体执行就可以得到 Awake ->OnEable-> Start ->-> FixedUpdate-> Upd ...
- 一起学习android使用一个回调函数onCreateDialog实现负载对话(23)
效果图: 有时候我们须要去做一个Activity启动时的数据载入对话框,关于对话框的各种实现能够通过一起学android之对话框 Dialog的创建(7)来完毕,在这里另外介绍一个,利用onCreat ...
- java_Eclipse中SVN的安装步骤(两种)和使用方法
若是只要site地址: http://subclipse.tigris.org/update_1.6.x, 下边可以忽略 一.给Eclipse安装SVN,最常见的有两种方式:手动方式和使用安装向导方 ...
- Unity插件之NGUI学习(8)—— Table和NGUI尺寸转换为世界坐标系尺寸
依据 Unity插件之NGUI学习(2),创建一个UI Root,在UI Root下创建一个Texture作为背景图,并设置图片,在Wiget下调整大小:然后在UI Root下再创建一个Panel. ...
- linux_ssky-keygen + ssh-copy-id 无密码登陆远程LINUX主机
使用下例中ssky-keygen和ssh-copy-id,仅需通过3个步骤的简单设置而无需输入密码就能登录远程Linux主机. ssh-keygen 创建公钥和密钥. ssh-copy-id 把本地主 ...
- Android_显示器本身被卸载应用程序
1.经jni实现功能 //LOG宏定义 #define LOG_INFO(tag, msg) __android_log_write(ANDROID_LOG_INFO, tag, msg) #defi ...