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

<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暑假多校联合---Problem Killer（暴力）

    原题链接 Problem Description You are a "Problem Killer", you want to solve many problems. Now ...

  2. 《Head First Java》——认识变量

    对象的引用 Book b = new Book(); Book c = new Book(); Book d = c;                   // 声明新的Book引用变量,但不创建新的 ...

  3. Genymotion无法下载OVA文件

    百度 下载Genymotion离线OVA文件(http://pan.baidu.com/s/1jIe5pjC ) 将OVA离线文件放到这个目录下:C:\Users\Administrator\AppD ...

  4. ahjesus 单词单数-复数相互转换C#

    看codesmith内置的模板在生成存储过程的时候有单复数的转换,用相同的函数名实现了一个 public static class StringUtil { /// <summary> / ...

  5. node.js图片上传

    1.node-formidable 对文件上传提供帮助的组件 2.app.js var formidable = require('formidable'); var http = require( ...

  6. linux kernel: possible SYN flooding on port 8080. Sending cookie

    possible SYN flooding on port 7244. Sending cookie

  7. 用事实说话，成熟的ORM性能不是瓶颈，灵活性不是问题：EF5.0、PDF.NET5.0、Dapper原理分析与测试手记

    [本文篇幅较长,可以通过目录查看您感兴趣的内容,或者下载格式良好的PDF版本文件查看] 目录 一.ORM的"三国志"    2 1,PDF.NET诞生历程    2 2,Linq2 ...

  8. Quartz.NET开源作业调度框架系列(三):IJobExecutionContext 参数传递

    前面写了关于Quartz.NET开源作业调度框架的入门和Cron Trigger , 这次继续这个系列, 这次想讨论一下Quartz.NET中的Job如何通过执行上下文(Execution Conte ...

  9. MyEclipse之无法连接到MySQL数据库

    问题描述: 在连接mysql中出现如下警告 Fri Oct 28 02:21:53 CST 2016 WARN: Establishing SSL connection without server' ...

  10. go语言常用函数：make

    创建数组切片 Go语言提供的内置函数make()可以用于灵活地创建数组切片.创建一个初始元素个数为5的数组切片,元素初始值为0: mySlice1 := make([]int, 5) 创建一个初始元素 ...