<!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. .net/c# RabbitMQ 连接断开处理-断线重连（转载）

    Rabbitmq 官方给的NET consumer示例代码如下,但使用过程,会遇到connection断开的问题,一旦断开,这个代码就会报错,就会导致消费者或者生产者挂掉. 下图是生产者发送消息,我手 ...

  2. R.string获取的是数字或者R.integer数字不对的问题

    String msg = R.string.menu_title; 获取menu_title的String值,但发现这样写报错,原因R.string.menu_title是int类型的,可是通过以下方 ...

  3. C#实现foreach

    方法:一.继承既有的接口 如:CollectionBase.DictionaryBase class TestForeach: CollectionBase { public void Add(str ...

  4. Linux内核(15) - 方法论

    什么是方法论 方法论给人的第一感觉就是它是一个玄之又玄的很朦胧的东西,显然,学习本身就是一件很玄乎的事情,有些人整天潇潇洒洒没见怎么用心就能够获得很好的成绩,而有些人则相反,投悬梁锥刺骨也还是成绩平平 ...

  5. APP三种开发模式

    目前主流应用程序大体分为三种:Web App(网页应用).Hybrid Ap(混合应用)p. Native App(原生应用). nativeapp是一个原生程序,一般运行在机器操作系统上,有很强的交 ...

  6. Spring横切面(advice)，增强(advisor)，切入点(PointCut)(转)

    Spring横切面(advice),增强(advisor),切入点(PointCut)的一点理解: 1.Spring管理事务有2种,其中一种是HibernateTransactionManager管理 ...

  7. Java并发之AQS同步器学习

    AQS队列同步器学习 在学习并发的时候,我们一定会接触到 JUC 当中的工具,JUC 当中为我们准备了很多在并发中需要用到的东西,但是它们都是基于AQS(AbstractQueuedSynchroni ...

  8. How to kill a process on a port on linux 怎么杀死 关掉一个端口

    sudo kill `sudo lsof -t -i:9001`

  9. VS2015预览版体验

    .NET开源了,JAVA颤抖吧... 据说VS2015可以开发android,ios,wp应用程序了,还可以开发能运行在mac,linux上的ASP.NET网站,如果真是这样就太爽啦,上微软官网下载了 ...

  10. iOS改变UINavigationBar导航条标题颜色和字体

    转自:http://www.2cto.com/kf/201311/260409.html iOS 5 以后 UINavigationController 可以 改变UINavigationBar导航条 ...