`

css tooplis

 
阅读更多
<html>
<style>
.tooltips{
position:relative;
width:62px;
height:32px;
line-height:32px;

text-align: center;
/* background: #FFFFFF; */
border-radius:4px;
border:1px solid rgba(0,0,0,0.20);
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.20); 
}
.arrow{
  position:absolute;
  color: #FFFFFF;
  width: 0px;
  height:0px;
  line-height: 0px;
  border-width: 15px 13px 0;
  border-style: solid dashed dashed dashed;
  border-left-color: transparent;
  border-right-color: transparent;
  /*  bottom: -15px; */
  right: 30%;
}
.arrow-border{
  color: rgba(0,0,0,0.20); 
  bottom: -15px;
  right: 30%;
}
.arrow-bg{
  color: #FFFFFF;
  bottom: -14px;
  right: 30%;
}

</style>


<body>
<div class="tooltips">
content
  <div class="arrow arrow-border"></div>
  <div class="arrow arrow-bg"></div>
</div>

 
<body>
</html>
分享到:
评论

相关推荐

    css3.0参考手册 css3.0参考手册

    css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...

    上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合

    上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合

    CSS测验 CSS测验 CSS测验

    CSS测验 CSS测验 CSS测验 CSS测验 CSS测验 CSS测验 CSS测验 CSS测验 CSS测验 CSS测验

    div+css例子 div+css例子

    div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子...

    CSS网站布局与美化,css

    CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与...

    svg转css,css转svg,svg与css互相转换并压缩

    svg转css,css转svg,svg与css互相转换并压缩

    css常用代码大全(html+css代码).pdf

    css常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdf

    CSS CSS CSS

    CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装

    自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式

    自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式

    js+css时钟效果 js+css时钟效果

    js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+...

    CSS权威指南 css彻底设计研究 HTML5和CSS3实战 HTML5与CSS3设计模式

    包含:CSS权威指南、css彻底设计研究、HTML5和CSS3实战、HTML5与CSS3设计模式

    CSS和CSS3思维导图(xmind版)

    什么是CSS? CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。 CSS 是一种标记语言,属于浏览器解释型语言,可以直接由浏览器执行,不需要编译。 CSS 是用来表现HTML或XML的标记语言。 CSS 是由W3C的CSS...

    CSS3特效-CSS3实现烟花特效

    CSS3实现烟花特效-图片+css

    Reset_CSS css样式重置文件

    CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的...

    精通CSS(css mastery)中文版 part1

    由于本书压缩质量比较好,所以格式比较大,40MB多,我分了6段压缩大家可以按 精通CSS(css mastery)中文版 part1 精通CSS(css mastery)中文版 part2 精通CSS(css mastery)中文版 part3 精通CSS(css ...

    CSS那些事儿.pdf

    本书专注于CSS技巧实例的讲解,由浅入深地分析了CSS样式在布局时所需要理解的原理。放弃到处可见的基础知识、网络中能随意搜索到的hack技巧,侧重原理分析,拓展读者使用CSS布局的思维方式,通过本书的阅读读者将会...

    css自动换行 css自动换行 css自动换行

    css自动换行css自动换行css自动换行css自动换行css自动换行css自动换行css自动换行css自动换行css自动换行

    CSS大全CSS大全

    CSS大全CSS大全CSS大全CSS大全CSS大全

    CSS2.0+CSS3.0的chm文档

    完整的CSS2.0和CSS3.0的chm文档,可以方便地查询CSS的各种属性和用法。

Global site tag (gtag.js) - Google Analytics