<!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. Android 中日期对话框的应用

    import java.util.Calendar; import android.widget.DatePicker; import android.app.DatePickerDialog; // ...

  2. Python 列表 reverse() 方法

    描述 Python 列表 reverse() 方法对列表中的元素进行反向排序. 语法 reverse() 方法语法: L.reverse() 参数 无. 返回值 该方法没有返回值,但是会对列表的元素进 ...

  3. [转]玩转UltraEdit，UE常见快捷键操作

    编辑器Ultraedit快捷键说到编辑器的快捷键,VIM是无与伦比的.要反对,也得是带脚踏板的EmaCS.UE还是有差距的,很大差距.注意:VIM是开源.免费的,而UE则需要注册.UE是Windows ...

  4. mvn test 执行testng测试用例

    maven项目,把testng用例防止test目录下,配置pom.xml 文件如下,执行mvn test 能自动执行testng里面的用例 <project xmlns="http:/ ...

  5. cocos2dx 3.3 场景切出时RenderTexture crash

    在cocos2dx 3.3中下面myScene在切出时会存在概率性崩溃(代码作了最大程度简化,仅为说明问题): class CmyLayer:public Layer{ public: CmyLaye ...

  6. java.lang.IllegalStateException: The specified child already has a parent. You must call removeView

     java.lang.IllegalStateException: The specified child already has a parent. You must call removeVi ...

  7. 关于TcpClient,Socket连接超时的几种处理方法

    用TcpClient做通信的时候,经常发现网络连接不通的时候,代码就卡死在那里,TcpClient竟然没有超时的设定 泪奔啊 看来微软不是把所有工具准备得妥妥当当的啊 没办法 现在用线程来包装一下这个 ...

  8. 用javascript获得地址栏参数的两种方法

    javascript获得地址栏参数. 方法1: <script language="JavaScript"> //取地址栏参数 <!-- function Req ...

  9. zabbix 源

    http://repo.zabbix.com/ # cat /etc/yum.repos.d/zabbix.repo [zabbix] name=Zabbix Official Repository ...

  10. 使用编辑器上传代码到数据库，数据库中的代码有html代码，前台显示html乱码处理

    网页出现乱码的解决办法 String content = teacher_mytask_detaillist.get(1)+"";//获取到数据库中的字段值,进行相应的替换 con ...