css 做一个弹出气泡,样式怎么设计?

难点:

要实现白色三角型,可以在伪元素before和after上设置一个黑、一个白三角形,白三角形会挡住黑的,从而实现。

&::before, &::after {
content: '';
display: block;
border: 10px solid transparent;
width: 0;
height: 0;
position: absolute;
left: 10px;
}
&::before {
border-top-color: black;
top: 100%;
}
&::after {
border-top-color: white;
top: calc(100% - 1px);
}

这样有什么问题呢?可以看到图中设置阴影,三角形区域是没有阴影的。

那么就到了我们第二个问题

drop-shadow的使用

先看看我们之前怎样设置阴影的。

box-shadow:0 0 3px rgb(0,0,0,0.5);

然后我们将采用drop-shadow优化

drop-shadow是给所有元素加背景阴影,包括文字,但是如果设置background的话就会只显示在边框上面,但这个属性兼容性差。

    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
background: white;

css实现气泡提示框三角及css中drop-shadow的使用的更多相关文章

  1. 纯CSS制作冒泡提示框

    来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html ...

  2. 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框

    在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...

  3. 纯CSS实现tooltip提示框,CSS箭头及形状

    本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3school:after选择器) :after选择器在被选元素的内容后面插入 ...

  4. CSS写的提示框(兼容火狐IE等各大浏览器)

    项目上使用jQuery的Tooltip组件,在谷歌上正常,在火狐和IE下没有效果,所以根据谷歌的提示框单独用CSS写了个提示框,比较好的兼容了火狐和IE,且效果一样 原Tooltip代码: $('#d ...

  5. iOS 灵活,简易,扩展性强的气泡提示框LFBubbleView(含源码)

    一.效果图 二.使用方法 使用简单,4行代码集成. _bubbleView = [[LFBubbleView alloc] initWithFrame:CGRectMake(, , , )]; _bu ...

  6. Arc Engine 中添加气泡提示框

    一.在ArcMap中的定位操作 已知若干点的经纬度坐标,要求在地图中进行定位: 1.通过Tool >Add X Y data 定位点,注意选择地理坐标系下的wgs 1984坐标系: 2.定位后的 ...

  7. css制作tips提示框,气泡框,制作三角形

    有时候我们的页面会需要这样的一些提示框或者叫气泡框,运用css,我们可以实现这样的效果. 为了实现上面的效果,我们首先要理解如何制作三角形. 当我们给一个DIV不同颜色的边框的时候,我们可以得到下面的 ...

  8. 用css实现云状提示框

    经常会用到云状提示框,如图: 基本框架是这样,以三角在左侧为例: <div class="container"> <div class="content ...

  9. 纯css来实现提示框

    用js用多了,就疏忽了最基本的css了---用title属性来实现提示框.下面言归正传------如何用css实现提示框: 1.利用title属性来实现鼠标滑过某个元素时,实现提示整段内容的功能(利用 ...

随机推荐

  1. html5网页录音和语音识别

    背景 在输入方式上,人们总是在追寻一种更高效,门槛更低的方式,来降低用户使用产品的学习成本.语音输入也是一种尝试较多的方式,有些直接使用语音(如微信语音聊天),有些需要将语音转化为文字(语音识别).接 ...

  2. css3 nth-child选择器

    css3 nth-child选择器 css3的nth-child选择器,乍看起来很简单,其实不是那么容易. 简单用法 p:nth-child(n) // 选择属于其父元素的第n个子元素的每个 < ...

  3. 用Canvas画一棵二叉树

    笔墨伺候 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // 然后便可以挥毫泼墨 ...

  4. java中线程有什么用?

    线程有什么用? 通过引入线程技术,在浏览器中你可以浏览网页的同时,播放动画和声音效果,同时在后台打印一个页面.例如老板可以同时处理工程师,秘书和清洁人员的事,这 就是多线程处理机制.Within th ...

  5. Python疫情爬取输出到txt文件

    在网上搬了一个代码,现在不适用了,改了改 import requestsimport jsondef Down_data(): url = 'https://view.inews.qq.com/g2/ ...

  6. mysql find_in_set在oracle下的解决方案

    比如一张表: artile (id,type,content); type:1表示文艺类,2表示小说类,3表示传记,4表示传说,等等5,6,7,8 表数据: id type content 1 3,1 ...

  7. Mybatis实现简单增删改查

    Mybatis的简单应用 学习内容: 需求 环境准备 代码 总结: 学习内容: 需求 使用Mybatis实现简单增删改查(以下是在IDEA中实现的,其他开发工具中,代码一样) jar 包下载:http ...

  8. Python入门-面向对象三大特性-多态

    Pyhon不支持多态并且也用不到多态,多态的概念是应用于Java和C#这一类强类型语言中,而Python崇尚"鸭子类型".

  9. servlet和action的区别

    1.Servlet:默认在第一次访问时被创建,创建一次,单实例对象 2.Action:访问时被创建,每次访问action的时候,都会创建action对象,创建多次,多实例对象

  10. Android 环境搭建记录

    Android 环境搭建记录 官网 https://developer.android.com/ studio 下载地址 官方下载 jikexueyuanwiki 国内镜像 studio历史版本 安装 ...