文档章节

特殊对话框

liangxiao
 liangxiao
发布于 2014/05/29 11:20
字数 228
阅读 25
收藏 0

1、效果1

这样一种效果是怎么样实现的呢?

其实它是三个框的组合:1、一个大的对话框  2、一个跟边框同样颜色的三角形 3、一个跟背景色一样的三角形

对话框相对定位,对话框里面的三角形1 绝对定位到对话框的边缘,三角形2定位到相同位置,简单错开一点就好了。


ps:后面有空再详细的说一下,供入门学习用的

附带吗一份

<html>
<body>
<style>
.test{width:300px; padding:30px 20px; border:5px solid #beceeb; position:relative;}
.test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.test span.bot{
    border-width:20px; 
    border-style:solid dashed dashed; 
    border-color:#beceeb transparent transparent; 
    left:80px; 
    bottom:-40px;
}
.test span.top{
    border-width:20px; 
    border-style:solid dashed dashed; 
    border-color:#ffffff transparent transparent; 
    left:80px; 
    bottom:-33px;
} 

</style>


<div class="test">
    <span class="bot"></span>
    <span class="top"></span>
    CSS “边框法”实现气泡对话框效果二
</div>

</body>
</html>



© 著作权归作者所有

共有 人打赏支持
liangxiao
粉丝 22
博文 254
码字总数 64832
作品 0
杭州
后端工程师
私信 提问
使用卓正PageOffice--数据区域点击事件

需求背景: Word文档指定位置填充的时候有一些特殊的需求需要word文档指定的位置只能填入某一类型的数据或者某几个数据.例如:有用户的需求是在word文件的某一区域插入一个日期,但是这里必须用...

山里的红杏
09/11
0
0
Hyper-V 2016 系列教程58 用SCVMM 2016 新建虚拟机 VM

(1)右键某一台虚拟机,选择菜单“创建虚拟机”,如下图所示。 (2)在“选择源”对话框中,因为是测试,我们可以选择“使用空白虚拟硬盘创建新的虚拟机”,如下图所示。 (3)输入虚拟机相...

chicxp
2017/09/25
0
0
ABBYY FineReader 12扫描对页的步骤有哪些

扫描对页时,两个页面将会显示在同一图像上。为提高 OCR 质量,对页的图像需要拆分为两个独立的图像。ABBYY FineReader 12提供有一种特殊模式,可以在ABBYY FineReader文档中自动将两个对页拆...

ABBYY
2016/08/16
3
0
js对页面上区域判断的问题

遇到的问题下图中有详细的描述:点击滑动块以外的区域,滑动块消失,但是需要排除一些特殊区域(表格中的名字,其他对话框等等),我现在采用的是判断点击区域是不是属于这些特殊区域。但是这...

YueZheng
2013/08/02
723
6
报表控件NCreport教程:报表高级设计

本次文章中将讲解NCreport一些高级功能的应用,我们会先定义一个组,接下来会添加summary变量到示例报表中。 一、对summary添加变量 对于提供的数量和总量来说,变量是特殊的数值项,它们每一...

很多风景
2014/02/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

转换 bytes 为 kb/mb/gb/tb/pb…

智能转换 bytes 为 kb/mb/gb/tb/pb… 用到了 math 模块中的一些函数 #!/usr/bin/env python# -*- coding: utf-8 -*-"""智能转换 bytes 为 kb/mb/gb/tb/pb..."""import mathdef conv...

郭恩洲_OSC博客
8分钟前
1
0
Mysql导出sql语句的方法及可能遇到的mysqldump: command not found

解决办法: 打开terminal    输入vi ~/.bash_profile    添加如下三行代码:    #mysql  PATH=$PATH:/usr/local/mysql/bin  export    保存并退出...

Liens
9分钟前
0
0
一文读懂,深入浅出 RPC框架

RPC 功能目标 RPC 的主要功能目标是让构建分布式计算(应用)更容易,在提供强大的远程调用能力时不损失本地调用的语义简洁性。为实现该目标,RPC 框架需提供一种透明调用机制让使用者不必显...

别打我会飞
10分钟前
0
0
sed关于打印

p命令用来打印文本行 跟替换命令中的p标记类似,p命令可以打印sed编辑器输出中的一行。 我们这主要还是用,下面的测试吧 我们可以试一下 echo 'hello world,xin!' | sed 'p' 如果我还是用tes...

woshixin
20分钟前
0
0
【转载】缓存穿透,缓存击穿,缓存雪崩解决方案分析

前言 设计一个缓存系统,不得不要考虑的问题就是:缓存穿透、缓存击穿与失效时的雪崩效应。 缓存穿透 缓存穿透是指查询一个一定不存在的数据,由于缓存是不命中时被动写的,并且出于容错考虑...

xiaomin0322
27分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部