`

Google 对话框 箭头效果

    博客分类：
  • css
htmlcss框箭头气泡 
阅读更多


要实现这种效果注意点：

1. height = 0; width = 0;
2. 理解：

border-top
border-left
border-right
border-bottom

3.
用2个div重叠，
前面的div 部分遮盖后面的 div，
只显示部分边框效果。 













<!DOCTYPE HTML>
<HTML>
<HEAD>
<style>
    .gb_bb{
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: #ccc;
            border-style: dashed dashed solid;
            border-width: 30px;
            top: 36px;
            position: absolute;
            left: 6.5px;
            z-index: 1;
            height: 0;
            width: 0;
    }
    
    .gb_bc{
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color:white;
            border-style: dashed dashed solid;
            border-width: 30px;
            top: 37px;
            position: absolute;
            left: 6.5px;
            z-index: 1;
            height: 0;
            width: 0;
    }
</style>
</HEAD>
<BODY>
<div class="gb_bb"></div>
<div class="gb_bc"></div>
<BODY>
</HTML>











<!DOCTYPE HTML>
<HTML>
<HEAD>
<style>
    .gb_bb{
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: #ccc;
            border-style: dashed dashed solid;
            border-width: 30px;
            top: 36px;
            position: absolute;
            left: 46.5px;
            z-index: 1;
            height: 0;
            width: 0;
    }
    
    .gb_bc{
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color:white;
            border-style: dashed dashed solid;
            border-width: 30px;
            top: 37px;
            position: absolute;
            left: 46.5px;
            z-index: 1;
            height: 0;
            width: 0;
    }
    
    .gb_ga {
            background: #fff;
            border: 1px solid #ccc;
            border-color: rgba(0,0,0,.2);
            -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
            box-shadow: 0 2px 10px rgba(0,0,0,.2);
            outline: none;
            overflow: hidden;
            position: absolute;
            left: 5px;
            top: 95px;
            -webkit-animation: gb__a .2s;
            animation: gb__a .2s;
            -webkit-border-radius: 2px;
            border-radius: 2px;
            -webkit-user-select: text;
            width:200px;
            height:150px;
            padding:15px;
            color:green;
            font-weight:bold;
    }
    
    
</style>
</HEAD>
<BODY>

<div style="margin:auto;width:900px;position:relative;">
    <div class="gb_bb"></div>
    <div class="gb_bc"></div>
    <div class="gb_ga">
        <h2>Hello,World!</h2>
        This is my first dialog window!
    </div>
</div>

<BODY>
</HTML>




=====================================================
=====================================================

使用 html5 ，可以使用 before 和 after 的css样式

来代替 

    
    <div class="gb_bb"></div>
    <div class="gb_bc"></div>


但是在IE8中却呈现这种效果： 






<!DOCTYPE HTML>
<HTML>
<HEAD>
<style>
  
    .gb_ga {
            background: #fff;
            border: 1px solid #ccc;
            border-color: rgba(0,0,0,.2);
            -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
            box-shadow: 0 2px 10px rgba(0,0,0,.2);
            outline: none;
            overflow: hidden;
            position: absolute;
            left: 5px;
            top: 95px;
            -webkit-animation: gb__a .2s;
            animation: gb__a .2s;
            -webkit-border-radius: 2px;
            border-radius: 2px;
            -webkit-user-select: text;
            width:200px;
            height:150px;
            padding:15px;
            color:green;
            font-weight:bold;
    }
    
    #con_html5:before{
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: #ccc;
            border-style: dashed dashed solid;
            border-width: 30px;
            top: 36px;
            position: absolute;
            left: 46.5px;
            z-index: 1;
            height: 0;
            width: 0;
        content:"";
    }
    
    #con_html5:after{
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color:white;
            border-style: dashed dashed solid;
            border-width: 30px;
            top: 37px;
            position: absolute;
            left: 46.5px;
            z-index: 1;
            height: 0;
            width: 0;
        content:"";
    }
    
    
</style>
</HEAD>
<BODY>
<div style="margin:auto;width:900px;position:relative;" id="con_html5">
    <div class="gb_ga">
        <h2>Hello,World!</h2>
        This is my first dialog window!
    </div>
    <div></div>
</div>
</BODY>
</HTML>



==================================================================

使用 before, after 的 菜单下拉效果：



























-
  • 大小: 148.8 KB
  • 大小: 25.2 KB
  • 大小: 27.1 KB
  • 大小: 28.4 KB
  • 大小: 13.1 KB
  • 大小: 76.8 KB
  • 大小: 114.6 KB
  • 大小: 134.7 KB
  • 大小: 109.2 KB
  • 大小: 107.2 KB
分享到：
| Java-Collections-经典20题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    google浏览器chrome快捷键大全

    * Ctrl+Shift+Delete：打开"清除浏览数据"对话框 * F1：在新标签页中打开帮助中心（首选方式） 地址栏快捷键 * 键入搜索字词，然后按 Enter：使用默认搜索引擎进行搜索 * 键入搜索引擎关键字，按空格键，然后键入...

    google earth 截图软件

    - **自定义标记**：可以添加文字、箭头等元素，方便标注和解释截图内容。 - **定时截图**：设置定时任务，软件会在指定时间自动进行截图，方便持续观察某一地区的动态变化。 5. **优化技巧**： - **调整分辨率**...

    Android 之callout实现

    虽然Marker本身不直接支持callout，但可以通过监听Marker的点击事件并在事件处理中弹出自定义对话框或浮动视图来模拟callout效果。以下是一段示例代码： ```java Marker marker = googleMap.addMarker(new ...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    9.jquery仿google首页图标动画菜单效果实现模拟鼠标动画菜单的代码 10.jquery仿卓越亚马逊网鼠标移到按钮弹出菜单的效果代码 11.jquery浮动变化的个性菜单插件floatmenu下载 12.jQuery黑色风格仿Flash版下滑...

    在任务栏里锁定浏览器和取消快捷方式

    如果您不希望安装额外的软件，也可以通过手动编辑注册表来达到同样的效果： 1. **打开注册表编辑器** - 打开“开始”菜单，点击“运行”，然后输入`regedit`并按Enter键打开注册表编辑器。 2. **查找并删除特定值...

    google-docs-utils:与Google文档互动的实用程序

    getLineText getWordElements getSelectionOverlayElements getSelection getCursorElement ...箭头撤消重做全选打印对话框typeText isTextSelected deleteSelection 已知限制版本命名贡献项目历史执照...

    常用JAVASCRIPT代码特效

    - ES6+的新特性，如箭头函数、模板字符串、Promise、async/await等，让代码更加简洁易读。 - Web Components：自定义可复用的HTML元素。 - Service Worker：离线存储和后台运行，提升Web应用的性能和体验。 这些...

    如何给整个网页截图.docx

    1. 需要先下载谷歌浏览器的截图插件，然后将其拖拽到已打开的谷歌浏览器窗口，等待安装完成。 2. 安装插件后，可以在地址栏右侧找到一个折叠按钮，点击后选择“整张网页截图”选项，或者使用快捷键Ctrl+Alt+H。 3. ...

    谷歌浏览器的键盘快捷键

    - `Ctrl+Shift+Delete`：打开“清除浏览数据”对话框，删除浏览历史、缓存等数据。 4. **帮助中心** - `F1`：在新标签页中打开帮助中心页面，获取支持信息。 #### 地址栏操作 1. **地址栏搜索** - 键入搜索字...

    javascript各种特效下载

    4. 下拉菜单和滑动面板：JavaScript可以轻松实现下拉菜单的展开和关闭，也可以创建滑动面板，如侧边栏菜单或模态对话框，通过点击按钮或其他触发事件实现显示和隐藏。 5. 表单验证：JavaScript可以实时验证用户输入...

    cell下划线靠左显示

    在电子表格应用中，如Microsoft Excel或Google Sheets，我们经常需要对单元格（cell）进行格式设置，包括添加下划线。"cell下划线靠左显示"这个话题是关于如何调整单元格下划线的位置，使其不居中而是靠近左侧。在...

    jQuery多功能弹出层插件Lightcase.zip

    在前端开发中，弹出层通常用于显示大图预览、视频播放、模态对话框等功能，而Lightcase通过其丰富的配置选项和响应式设计，能够满足多种场景下的需求。 首先，Lightcase的核心是jQuery库，这是一个广泛使用的...

    JS网页特效大全下载

    - 弹窗提示：模态框、警告提示、确认对话框等。 - 表单验证：输入校验、格式检查、实时反馈等。 - 图片懒加载：只在图片进入视口时加载，提高页面加载速度。 - 拖放功能：允许用户通过拖放操作移动元素。 3. **...

    单击表头添加升降序符号

    - 你可以看到，表头旁边会出现一个向上的箭头（升序）或向下的箭头（降序），表示当前的排序状态。 2. **多级排序**：如果需要根据多个条件进行排序，可以进行多级排序。右键点击表头，选择“排序”选项，然后在弹...

    android4.0ICORNS

    4. **对话框和浮动操作按钮**：对话框中的图标通常较小，但依然保持清晰的轮廓，而浮动操作按钮（FAB）的图标则以明亮的色彩突出，吸引用户的注意力。 三、使用与适配 在Eclipse IDE中，开发者可以方便地获取和...

    js网页特效合集

    4. **交互元素**：JavaScript 可以使按钮、链接和其他交互元素具有更丰富的行为，如弹出对话框、展开/关闭菜单、表单验证等，提高用户与网页的交互性。 5. **滑块与轮播图**：这是网页特效中的常见部分，JavaScript...

    31个网站制作中有用的JS特效代码5

    4. **轮播图组件**：JS可以创建响应式的轮播图，支持自动切换、触摸滑动和箭头导航等交互。 5. **模态框**：用于弹出窗口显示详细信息，如登录、注册、提示等，JS可以控制其显示和隐藏。 6. **表单验证**：通过JS...

    quickpurple:自动从code.google.compquickpurple导出

    使用箭头或Ctrl + j和Ctrl + k上下移动。 按Enter键激活状态或打开对话。 同样，您可以打开一些Pidgin对话框。Windows上的QuickPurple 不幸的是，目前我没有Windows盒子可以尝试在Windows上构建它，因此欢迎任何...

    前端项目-ekko-lightbox.zip

    2. **响应式设计**：由于基于Bootstrap，Ekko Lightbox 自然继承了其响应式特性，能够在不同设备和屏幕尺寸上自适应显示，确保在手机、平板电脑和桌面设备上的良好视觉效果。 3. **键盘导航**：用户可以通过键盘的...

    前端项目-react-mdl.zip

    在React中，MDL作为一个库，提供了一系列预先构建的React组件，如按钮、卡片、菜单、对话框等，这些组件遵循Material Design的视觉样式和交互原则。使用React-MDL可以使开发人员快速构建出响应式且具有Material ...

Magicbox
Global site tag (gtag.js) - Google Analytics