实现自定义的手型气泡提示

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style type="text/css">  

    .test{

      	background: #CE5010 none repeat scroll 0% 0%;

				position: relative;

				border-radius: 20px;

				margin: 60px;

				height: 2em;

				text-align: center;

				float: left;

				color: white;

				padding-left: 10px;

				padding-right: 10px;

				padding-top: 5px;

				font-size: 12px;

    }  

    .test span.bot{

    		width: 0;

        height: 0;

        font-size: 0;

        overflow: hidden;

        position: absolute;

       border-style: solid;

			left: 0px;

			border-color: transparent transparent transparent rgb(206, 80, 16);

			top: 18px;

			border-width: 12px;

    }  

    </style>

</head>  

<body>

    <div class="test">

        <span class="bot"></span>

        CSS"边框法"实现气泡对话框效果，需要两个辅助span

    </div>  

</body>  ""

<html>

　　

实现效果如下：

aaarticlea/png;base64,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" alt="" />

CSS实现自定义手型气泡提示的更多相关文章

  1. CSS鼠标效果手型效果

    Example:CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a> Exam ...

  2. 气泡提示 纯CSS

    tooltip(气泡提示) 依赖 脚本文件:CalvinTip.js 样式文件:toolTip.css 参数 elems HTMLNode 必须 气泡提示的元素 options Object 可选 多 ...

  3. vue 指令---气泡提示(手撸实战)

    菜鸟学习之路//L6zt github 自己在造组件轮子,也就是瞎搞.自己写了个slider组件,想加个气泡提示.为了复用和省事特此写了个指令来解决.预览地址项目地址 github 我叫给它胡博 cs ...

  4. CSS样式--移动划过超链接鼠标变手型详解

    用css控制鼠标样式的语法如下:<span style="cursor:*">文本或其它页面元素</span>把 * 换成如下15个效果的一种: 下面是对这 ...

  5. css实现气泡提示框三角及css中drop-shadow的使用

    css 做一个弹出气泡,样式怎么设计? 难点: 要实现白色三角型,可以在伪元素before和after上设置一个黑.一个白三角形,白三角形会挡住黑的,从而实现. &::before, & ...

  6. Tippy.js - 免费开源且高度可定制的气泡提示独立组件

    推荐一个非常优秀的 web 气泡提示独立UI组件. 介绍 Tippy.js 是一款用于Web的完整工具提示,弹出菜单,下拉菜单和菜单解决方案.适用于鼠标,键盘和触摸输入. 特点 超轻量的纯 javas ...

  7. 【C#】组件发布：MessageTip，轻快型消息提示窗

    -------------201610212046更新------------- 更新至2.0版,基本完全重写,重点: 改为基于原生LayeredWindow窗体和UpdateLayeredWindo ...

  8. Notepad++ 配置 支持jquery、html、css、javascript、php代码提示

    原文:Notepad++ 配置 支持jquery.html.css.javascript.php代码提示 官网下载:http://notepad-plus-plus.org/ 获取插件的方法:打开软件 ...

  9. jquery.validate.unobtrusive.js实现气泡提示mvc错误

    改写jquery.validate.unobtrusive.js实现气泡提示mvc错误 个人对于这个js.css不是很擅长,所以这个气泡提醒的样式网上找了下,用了这个http://www.cnblog ...

随机推荐

  1. 2015暑假多校联合---Assignment（优先队列）

    原题链接 Problem Description Tom owns a company and he is the boss. There are n staffs which are numbere ...

  2. Spring中常用的连接池配置

    首先,我们准备Jdbc属性文件 jdbc.properties,用于保存连接数据库的信息,利于我们在配置文件中的使用 jdbc.driver=com.mysql.jdbc.Driver jdbc.ur ...

  3. Openfire重新安装

    由于忘记密码等原因,无法启动openfire ,那就重装吧,废话不多说,命令行按步骤粘贴执行就好了. 1.先删除mysql数据 mysql -u root -p 输入密码:例如,123456 show ...

  4. 开发apple pay碰到的问题总结

    本来想简单总结一下Apple Pay 开发过程中的几个问题, 结果被下面这篇文章全碰上了, 干脆全文转载, 作者对相关资源整理得比较详细, 比较有参考价值 总的来说, 我们做过 APNs 推送的话, ...

  5. Infinite Scroll - jQuery & WP 无限滚动插件

    无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll  这款  ...

  6. OriDomi – 像折叠纸张一样折叠 DOM 元素

    Web 原本是扁平化的,但是现在你可以折起来.OriDomi 是一个开源的 JavaScript 库,使得 DOM 元素能够实现像纸折一样折叠的效果.在创建你所看到的场景背后,OriDomi 做了大量 ...

  7. 【javascript激增的思考04】MVC与Backbone.js(beta)

    前言 最近整理了很多前端面试题的东西,今天又去参加了一次面试,不知各位烦不烦,我反正有点累了,于是我们今天继续回到我们前段时间研究的问题,我们再来看看MVC吧. 什么是MVC 又回到这个问题了,到底什 ...

  8. angular源码分析：angular的整个加载流程

    在前面,我们讲了angular的目录结构.JQLite以及依赖注入的实现,在这一期中我们将重点分析angular的整个框架的加载流程. 一.从源代码的编译顺序开始 下面是我们在目录结构哪一期理出的an ...

  9. ae

    根据属性提取要素(利用GP) http://blog.csdn.net/ewyetc/article/details/6746728

  10. Autodesk 2013开发者日（DevDays）又要来了 -- 北京（2013年11月7日）和上海（2013年11月11日）

    各位, 一年一度的Autodesk 开发者日(Devdays)开始注册了,抓紧时间前排占座! 注册地址: www.autodesk.com.cn/adndevday2013 今年开发者日的主题:革命性 ...