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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>css圆角提示框 </title>

<style>

/*提示圆角框*/

.circle_bot { clear:both; font: 12px/1.125 Arial; }

.circle_bot .s_b b, .circle_bot span.s_i i { font-size:1px; line-height:1px; overflow:hidden; display:block; clear:both; }

.circle_bot .s_b b, .circle_bot span.s_i i, .circle_bot .info { background:#fff2f2; border:#f88 solid; }

.circle_bot b.b1 { border-width:1px   ; margin: 2px; height:0px; }

.circle_bot b.b2 { border-width: 1px; margin: 1px; height:1px; }

.circle_bot span.s_i i { height:1px; border-width: 1px; }

.circle_bot .i1 { width:0px; margin-left:36px; }

.circle_bot .i2 { width:2px; margin-left:35px; }

.circle_bot .i3 { width:4px; margin-left:34px; }

.circle_bot .i4 { width:6px; margin-left:33px; }

.circle_bot .i5 { width:8px; margin-left:32px; }

.circle_bot .i6 { width:10px; margin-left:31px; margin-top:-1px; }

.circle_bot .info { border-width: 1px; color:#; padding:10px;}

/*浅黄边白底*/

div.circle_yellow {clear:both;}

div.circle_yellow .s_b b,div.circle_yellow .s_i i, div.circle_yellow .info { background:#fff; border-color:#db9; }

</style>

</head>

<body>

<div class="circle_bot">

    <span class="s_b"> <b class="b1"></b> <b class="b2"></b></span>

    <div class="info">当那一天我醒来的时候，我就发现这世界变了</div>

    <span class="s_b"><b class="b2"></b> <b class="b1"></b></span>

    <span class="s_i"> <i class="i6"></i> <i class="i5"></i> <i class="i4"></i> <i class="i3"></i> <i class="i2"></i> <i class="i1"></i></span>

</div>

<br />

<div class="circle_bot circle_yellow">

    <span class="s_b"> <b class="b1"></b> <b class="b2"></b></span>

    <div class="info">变得让我无法看懂每一个人，一个陌生的世界。</div>

    <span class="s_b"><b class="b2"></b> <b class="b1"></b></span>

    <span class="s_i"> <i class="i6"></i> <i class="i5"></i> <i class="i4"></i> <i class="i3"></i> <i class="i2"></i> <i class="i1"></i></span>

</div>

<div style="text-align:center;clear:both">

</div>

</body>

</html>

CSS圆角框，圆角提示框的更多相关文章

  1. JS组件系列——Bootstrap寒冬暖身篇：弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  2. Bootstrap：弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  3. JS组件Bootstrap实现弹出框和提示框效果代码

    这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...

  4. Bootstrap篇：弹出框和提示框效果以及代码展示

     前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你 ...

  5. js三种消息框总结-警告框、确认框、提示框

    js消息框类别:警告框.确认框.提示框 警告框:alert("文本"); 确认框:confirm("文本"); 提示框:prompt("文本" ...

  6. uwp - ContentDialog - 自定义仿iphone提示框，提示框美化

    原文:uwp - ContentDialog - 自定义仿iphone提示框,提示框美化 为了实现我想要的效果花费了我很长时间,唉,当初英语不好好学,翻官网翻了半天才找到,分享给刚入门的新手. 首先看 ...

  7. JS_Window-三种消息框：警告框、确认框、提示框、页面显示时间-计时-延时

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  8. 使用css实现全兼容tooltip提示框

    在上一篇文章中,使用css实现了一个全兼容的三角形图标,这个三角型图标可以使用于多种场景,比如下拉图标.多级菜单等,这篇文章我们使用这个图标通过纯css来实现一个我们常见的tooltip提示框. 最终 ...

  9. 利用 css 制作简单的提示框

    在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...

  10. Bootstrap实现弹出框和提示框效果代码

    一.Bootstrap弹出框使用过JQuery UI应该知道,它里面有一个dialog的弹出框组件,功能也很丰富.与jQuery UI的dialog类似,Bootstrap里面也内置了弹出框组件.打开 ...

随机推荐

  1. oc 代码块的使用

    #import <UIKit/UIKit.h> #import "AppDelegate.h" int (^max)(int,int);//定义代码块,类似c的函数指针 ...

  2. Report_Report Builder的一些基本概念（概念）

    2014-05-31 Created By BaoXinjian

  3. Linux内核(17) - 高效学习Linux驱动开发

    这本<Linux内核修炼之道>已经开卖(网上的链接为: 卓越.当当.china-pub ),虽然是严肃文学,但为了保证流畅性,大部分文字我还都是斟词灼句,反复的念几遍才写上去的,尽量考虑到 ...

  4. Linux时间子系统(十五) clocksource

    一.前言 和洋葱一样,软件也是有层次的,内核往往需要对形形色色的某类型的驱动进行抽象,屏蔽掉其具体的特质,获取该类驱动共同的逻辑,而又根据这些逻辑撰写该类驱动的抽象层.嵌入式系统总是会提供timer的 ...

  5. android binder 机制二(client和普通server)

    在讲它们之间的通信之前,我们先以MediaServer为例看看普通Server进程都在干些什么. int main() { -- // 获得ProcessState实例 sp<ProcessSt ...

  6. failed to load selinux policy freezing

    一.原因: 在修改selinux配置文件时输入并保存了一个错误的配置参数. 二.挽救: 1. 重启系统. 2. 在启动选项上按 e. 3. 进入grub编辑页面. 4. 向下移动光标至fi下一行. 5 ...

  7. C#方法参数--值参数，引用参数，输出参数

    值参数: 使用值参数,通过复制实参的值到形参的方式,把数据传递到方法,方法被调用的时候,系统做如下操作: 在栈中为形参分配空间: 复制实参到形参. 注意:一个值参数的实参不一定是变量,它可以是任何能够 ...

  8. sql server中bit字段实现取反操作

    update Fct_StockMove set Disabled=Disabled^1 WHERE MoveId='DCE268E0-2CB3-4D17-AC4E-0046FB459CAD'; 1. ...

  9. mysql如何查找某字段所在表

    如果是5.0以上的,以root用户连接,可以看到一个叫information_schema的表, 然后只要:use information_schema; select `TABLE_NAME`fro ...

  10. paip.索引的种类以及实现attilax 总结

    paip.索引的种类以及实现attilax 总结 1. 索引的类型 1 2. Btree索引(分块索引) 1 3. Hash 索引(编号索引) 1 4. 倒排索引 2 5. 对大型文本文件做索引 2 ...