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

<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. Scalaz（37）－ Free ：实践－DB Transaction free style

    我一直在不断的提示大家:FP就是Monadic Programming,是一种特殊的编程风格.在我们熟悉的数据库编程领域能不能实现FP风格呢?我们先设计一些示范例子来分析一下惯用的数据库编程过程: i ...

  2. Openwrt笔记-IPv6与启动顺序

    之前使用了nat6方案和x3c8021x实现了校园网上网和IPv6连接:但实际使用时经常出现莫名奇妙的问题.IPv6状态要么是无法连接网络,要么是无法连接Internet:经过研究,发现大概是自启动项 ...

  3. java 数据库连接池

    1. About java利用jdbc直接连接数据库,经常取得连接,用完释放,很浪费系统资源 2. Code Java代码 package com.cdv.mam.db; import java.sq ...

  4. strtr和str_replace字符替换函数

    (一)strtr是字符替换函数 (1)单个字符替换: <?php echo strtr("abba", "ab", "10"),&qu ...

  5. WinForm 窗体应用程序 （初步）之二

    现在,我们来了解一些基本控件.控件是放置在工具箱里的,你可以在界面的左侧或者通过菜单栏的视图选项找到它. (1)Label 控件 这是一个用于放置文字的控件,因为你不能在窗体上直接输入文字. (2)T ...

  6. javascript通用事件封装

    随着最近几年Html5的兴起,越来越多的应用采用html5进行实现,一个优秀的网页应用不但需要美观简洁的UI界面,更需要一个良好的交互.网页应用大部分的交互需要用javascript事件进行实现.虽然 ...

  7. asp.net C#发送邮件类

    很久前写的一个简单邮件发送类分享给大家: using System; using System.Data; using System.Configuration; using System.Web; ...

  8. JavaScript基础19——innerHTML示例

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 深入理解javascript---如何编写高质量的代码？

    如何书写可维护的代码? 最小全局变量 JavaScript通过函数管理作用域.在函数内部声明的变量只在这个函数内部,函数外面不可用.另一方面,全局变量就是在任何函数外面声明的或是未声明直接简单使用的( ...

  10. getDate()返回日期不一致问题引发的bug

    问题描述 最近在webapp的开发中遇到一个Date对象中getDate获取日期的兼容性问题,Date对象的getDate方法返回的日期和传入的日期不一致,例如: 在android 4.3以下版本,g ...