<!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. zabbix客户端安装和配置（linux）

    zabbix源码安装客户端 # tar -xvf zabbix-.tar.gz # mv zabbix- zabbix # cd zabbix # ./configure --prefix=/usr/ ...

  2. 总结Codeigniter的一些优秀特性

    总结Codeigniter的一些优秀特性 近期准备接手改进一个别人用Codeigniter写的项目.尽管之前也实用过CI,可是是全然按着自己的意思写的,没按CI的一些套路.用在公众的项目,不妨按框架规 ...

  3. Note for video Machine Learning and Data Mining——training vs Testing

    Here is the note for lecture five. There will be several points  1. Training and Testing  Both of th ...

  4. Excel操作类库最常用到的4种开源项目与MS Excel类库写操作对比分析性能

    4种开源Excel读写类库与MS Excel类库写操作对比 软件开发过程中,经常需要将数据保存为.xls或.xlsx文件.之前发现微软提供的Microsoft.Office.Interop.Excel ...

  5. [转]Golang 中使用 JSON 的小技巧

    taowen是json-iterator的作者. 序列化和反序列化需要处理JSON和struct的关系,其中会用到一些技巧. 原文 Golang 中使用 JSON 的小技巧是他的经验之谈,介绍了一些s ...

  6. [Jobdu] 题目1391：顺时针打印矩阵

    题目描述: 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数字1,2 ...

  7. CentOS使用EPEL YUM源

    刚刚开始学习centos,感觉很不适应,因为好多软件,yum里面居然没有,让我很不爽,一阵狂搜. 原来centos还有一个epel源,果然,不熟悉的东东,处处是坑啊! EPEL (Extra Pack ...

  8. 使用cat命令添加或附加多行文本

    覆盖原有文本: cat>test<<EOF the 1 line the 2 line the 3 line EOF 追加的原有文本尾部: cat>>test<&l ...

  9. FPGA三分频,五分频,奇数分频

    我们在做FPGA设计时,有时会用到时钟频率奇数分频的频率,例如笔者FPGA的晶振为50M,当我们需要10M的时钟时,一种方式可以使用DCM或PLL获取,系统会内部分频到10M,但其实VERILOG内部 ...

  10. 每日英语：Best Ways to Ramp Up to A Marathon

    For the record number of American runners who completed an official race event last year, the questi ...