<!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. Https自签名证书认证及数据请求的封装

    在WWDC 2016开发者大会上,苹果宣布了一个最后期限:到2017年1月1日 App Store中的所有应用都必须启用 App Transport Security安全功能.App Transpor ...

  2. JMeter ----内置函数列表

    Jmeter有两种类型的函数: 用户定义的静态值(或变量) 内置函数 用户定义的静态值允许用户定义变量时被替换为静态的值测试树编译并提交运行.需要注意的是,变量目前无法嵌套,即${Var${N}}不起 ...

  3. qsort函数、sort函数

    先说明一下qsort和sort,只能对连续内存的数据进行排序,像链表这样的结构是无法排序的. 首先说一下, qsort qsort(基本快速排序的方法,每次把数组分成两部分和中间的一个划分值,而对于有 ...

  4. spring中事务配置

    1 如果在方法.类.接口上使用注解的方式声明事务,需要在配置文件中进行配置,以便通知 Spring 容器对标注 @Transactional 注解的 bean 加工处理. 首先需要引入 tx 命名空间 ...

  5. maven的部署安装

    首先上传apache-maven-3.3.9-bin.tar.gz tar -xfvz apache-maven-3.3.9-bin.tar.gz mv apache-maven-3.3.9 /dat ...

  6. 【Android】12.2 利用Intent启动和关闭Activity

    分类:C#.Android.VS2015: 创建日期:2016-02-23 一.简介 Android应用程序中一般都有多个Activity,在Activity中,通过调用StartActivity方法 ...

  7. 使用Xcode 5创建Cocoa Touch Static Library（静态库）

    转自:http://blog.csdn.net/jymn_chen/article/details/21036035 首先科普一下静态库的相关知识: 程序编译一般需经预处理.编译.汇编和链接几个步骤. ...

  8. Direct-X学习笔记--三维摄像机

    一.介绍 哇! 到了传说中的3D摄像机啦! 之前我们写的东东,都是观察点不动,通过世界变换让东西动,今天,通过三维摄像机我们就能够改变我们的观察点,观察方向,任意在三维空间中驰骋.之前我们所设定的视角 ...

  9. Debugging and performance,ETW

    http://blogs.technet.com/b/serverandtools/ https://channel9.msdn.com/Shows/Defrag-Tools http://blogs ...

  10. web 安全问题（二）：XSS攻击

    上文说完了CSRF攻击,本文继续研究它的兄弟XSS攻击. 什么是XSS攻击 XSS攻击的原理 XSS攻击的方法 XSS攻击防御的手段 什么是XSS攻击 XSS攻击全名(Cross-Site-Scrip ...