先看效果

废话不说,直接上图(请把鼠标移到我的头像上),看看今天要做的是什么:

实现原理

这些提示框原理都是一样的,且只需一个div标签就能实现,当然也有笨方法,比如用多个标签相互重叠、遮盖,或者干脆用图片,也能实现,但那样就没有讨论的意义了。今天要说的是用css的伪元素实现:before 和 :after 。伪元素顾名思义就是html标签中不存在的元素,是用css“虚拟”出来的。这样对一个div标签来说就活生生的多出了两个(伪)元素。一个在前,一个在后。控制这两个伪元素的大小、位置、边框、圆角、层级就能实现多种多样的效果。

先说说圆角

border-radius是css3最常用的属性之一了,有了它再也不要用图片实现圆角了,其参数个数和margin,padding类似,可分别给出1、2、3、4个参数值:

  一个值:控制四个拐角。

  两个值:第一个值控制 左上,右下。第二个值控制 右上,左下。

  三个值:第一个值控制 左上。第二个值控制 右上 和 左下。第三个值控制右下。

  四个值:按顺时针方向分别控制 左上,右上,右下,左下。

用以上方法控制四个拐角的弧度可实现基本的圆角,对于一个正方行来说把圆角设大了可形成一个圆圈,如下一个长宽为100px的div:

圆角为10px时: 圆角为40px时: 圆角为50px时(长宽的一半):

对于一个长100px,宽200px的矩形来说,效果如下:

圆角为10px时:

圆角为40px时:

圆角为50px时:

那么问题来了,怎样画出一个椭圆?

怎样实现椭圆?

由上图可看出,圆角之所以能形成是由两个圆角半径决定的:垂直半径和水平半径。当两者相等,且都为50px时就形成了一个圆,当两者不等时就形成了椭圆,代码写法为:

效果:

控制伪元素

圆角,圆形,椭圆实现好后,其余效果就靠伪元素来实现了,先说一说第一个效果图中的三角形吧,其重要的一步就是设置指定的边框颜色为透明,如 border-top-color:transparent。看代码:

 效果:

代码:效果:

三角形出现后,剩下的就是调整其位置,让它与主体连接,这样简单的提示框就实现了。要想出现白色效果那就用另一个伪元素 :after,设置其边框(三角形)颜色为白色,盖在紫色三角形上,位置往后移动几个像素就形成了紫色边框效果:

怎样实现边框更圆滑的提示窗?

三角形提示窗略显生硬,下面说的是更有美感的提示窗,原理是相同的,其核心是控制伪元素4个边框的长度不等、圆角也不等,“揉捻”出奇奇怪怪的形状,然后相互组合、遮盖,比如以下伪元素形状:

  代码:

然后用另一个伪元素:after遮盖:

小提示1:如果想做出更复杂的效果,或许div的两个伪元素已经不够用了,那就添加<p>标签,控制使用<p>的两个伪元素,这样又多了两个千奇百怪的图形,应该够用啦:

<div>
<p>你在想什么?</p>
</div>

小提示2:留意代码中的 content:'';   试试以下unicode码属性值:

content:"\25c1";
content: "\25a8";
content:"\0027";
content:"\00a0";

更多特殊符号,点击Unicode字符列表

(完)

 

css伪元素实现tootip提示框的更多相关文章

  1. css伪元素用法大全

    本文主要讲解css伪元素的用法,有需要的朋友可以阅读此文.本文讲解的伪元素有:before,after. 什么是伪元素(Pseudo element)? 伪元素不是真正的元素,不存在与文档之中,所以j ...

  2. CSS——伪元素

    CSS伪元素 伪元素的语法: selector:pseudo-element {property:value;} 作    用 添加特殊样式 :first-line 伪元素 "first-l ...

  3. jQuery如何改变css伪元素样式

    首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设 ...

  4. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  5. css 伪元素分享!!!

    最近接触到的css 伪元素觉得还算不错 分享下: 1.清楚内盒浮动设置: ;} .back_list ul:after{;visibility: hidden;}/*清楚内盒浮动设置*/ 2.伪元素a ...

  6. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  7. (六)CSS伪元素

    CSS伪元素用于向某些选择器设置特殊效果. 伪元素的用法和伪类相似: selector:pseudo-element {property:value;} CSS类也可以与伪元素配合使用: select ...

  8. CSS 伪元素

    CSS伪元素是用来添加一些选择器的特殊效果. 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: selector.c ...

  9. css伪元素

    CSS 伪元素用于向某些选择器设置特殊效果. 1.:first-line 伪元素  "first-line" 伪元素用于向文本的首行设置特殊样式.注意:"first-li ...

随机推荐

  1. SharePoint Server 2013开发之旅(二):使用在线的开发人员网站进行SharePoint App开发

    上一篇我已经介绍了新版本的SharePoint Server提供了四种主要的开发场景,其中一个全新的App开发模型让我们眼前一亮.这一篇我将介绍如何在线进行SharePoint App开发. 谈到Sh ...

  2. spring aop源码实现分析

    1. 先分析Advice before执行Cglib2AopProxy的intercept方法: /** * General purpose AOP callback. Used when the t ...

  3. [转载]UML用例图总结

    前言 用例图主要用来描述“用户.需求.系统功能单元”之间的关系.它展示一个外部用户能够观察到的系统功能模型图.用例图多用于静态建模阶段(主要是业务建模和需求建模),帮助开发团队以一种可视化的方式理解系 ...

  4. 讲讲Handler+Looper+MessageQueue 关系

    Handler+Looper+MessageQueue这三者的关系其实就是Android的消息机制.这块内容相比开发人员都不陌生,在面试中,或者日常开发中都会碰到,今天就来讲这三者的关系. 概述: H ...

  5. js单击输入框后弹出提示信息效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. C# 线程系列三 定时器线程

    上一篇文章我们讲诉了自定义线程执行器和任务处理器 我们继续来讲解自定义线程的定时执行器,我们在很多场景下需要做到某些状态或者数据进行更新,如果事情很多很杂,很时候时候会创建很多不同的定时器那么势必会照 ...

  7. OpenJudge4980:拯救行动//stl优先队列

    总时间限制:  10000ms 内存限制:  65536kB 描述 公主被恶人抓走,被关押在牢房的某个地方.牢房用N*M (N, M <= 200)的矩阵来表示.矩阵中的每项可以代表道路(@). ...

  8. 关于Html与css的一些解释

    一.简单介绍 1.html,是hyper text markup language的缩写,中文为“超文本标记语言”. 2.html不是编程语言而是一种标记语言. 二.标签与元素 1.html标签:如& ...

  9. LeetCode - Binary Tree Level Order Traversal II

    题目: Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, from ...

  10. java继承的对象中构造函数的调用顺序

    建立两个继承关系的对象 public class Machine { public String machieNameString; public Machine() { System.out.pri ...