转载请注明来源：https://www.cnblogs.com/hookjc/

其实这种圆角框是靠一个个容器堆砌而成的，每一个容器的宽度不同，这个宽度是由margin外边距来实现的，如：margin:0 5px;就是左右两侧的外边距5像素，从上到下有5条线，其外边距分别为5px，3px，2px，1px，依次递减。因此根据这个原理我们可以实现简单的html结构和样式


<html> 
<head> 
<title>css圆角效果</title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
<style type="text/css"> 
div.RoundedCorner{background: #9BD1FA} 
div.RoundedConn{background:#FFFFFF;margin:0px 4px;padding:4px 0px;}
b.rtop, b.rbottom{display:block;background: #FFFFFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA} 
b.r1{margin: 0 5px} 
b.r2{margin: 0 3px} 
b.r3{margin: 0 2px} 
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px} 
</style> 
</head> 
<body>
<div class="RoundedCorner"> 
<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b> 
<div class="RoundedConn">无图片实现圆角框<br/></div>
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b> 
</div> 
<br>
</body> 
</html>

来源：python脚本自动迁移

CSS 圆角框的更多相关文章

  1. 大神写的一个纯CSS圆角框，膜拜！（支持IE9一下的低版本）

    留着提醒自己,底层才是最重要的,不要一直傻瓜的编程下去! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  2. CSS圆角框，圆角提示框

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

  3. 笔记《精通css》第4章 背景图像，平铺方式，背景定位，圆角框，投影，不透明

    第4章  背景图像,平铺方式,背景定位,圆角框,投影,不透明 1.背景图像 background-image:url() 2.平铺方式 background-repeat:repeat-x repea ...

  4. DIV+CSS圆角边框

    简洁型css圆角: 方法1: 简洁型css圆角矩形 code1: <style type="text/css"> .b1,.b2,.b3,.b4,.b1b,.b2b,. ...

  5. CSS圆角进化论

     CSS圆角发展过程 大致经历了3个阶段,包括: 背景图片实现圆角 CSS2.0+标签模拟圆角 CSS3.0圆角属性(border-radius属性)实现圆角 ☛背景图片实现圆角:==使用背景图片实现 ...

  6. ch4 圆角框

    固定宽度的圆角框 只需要两个图像:一个应用于框的顶部,一个应用于底部 <div class="box"> <h2>Lorem Ipsum</h2> ...

  7. css圆角矩形及去掉空格属性

    css圆角矩形 -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; 去掉空格 white-space:nowra ...

  8. 纯CSS气泡框实现方法探究

    气泡框(或者提示框)是网页中一种很常见的元素,大多用来展示提示信息,如下图所示: 拆分来看,形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头,要制作出这样的气泡框,如果解决了三角形小箭头 ...

  9. CSS圆角效果

    看了院子里一篇关于CSS圆角技巧的文章,试了一下,觉得很好,贴出练习的代码.优秀文章链接: http://www.cnblogs.com/luluping/archive/2010/06/26/176 ...

随机推荐

  1. CS5211|DP转LVDS |低成本DP to LVDS Conversion 方案设计

    目前市面上DP转LVDS转换--DP to LVDS Conversion 方案设计有以下: 龙迅LT8911 LT7211.普瑞PS8625.昆泰CH7511等方案,DP换LVDS转换主要是用在一些 ...

  2. Java 设置系统参数和运行参数

    系统参数 系统级全局变量,该参数在程序中任何位置都可以访问到.优先级最高,覆盖程序中同名配置. 系统参数的标准格式为:-Dargname=argvalue,多个参数之间用空格隔开,如果参数值中间有空格 ...

  3. go 使用 sort 对切片进行排序

    golang对slice的排序 golang里面需要使用sort包,并且实现几个接口Len, Swap, Less sort 包排序demo 假如现在有个slice 叫做 ids 里面保存的数据类型是 ...

  4. vue中使用window.resize并去抖动优化

    this.clientWidth = document.documentElement.clientWidth window.onresize = () => { this.clientWidt ...

  5. [BJDCTF2020]EzPHP-POP链

    那次某信内部比赛中有道pop链问题的题目,我当时没有做出来,所以在此总结一下,本次以buu上复现的[MRCTF2020]Ezpop为例. 题目 1 Welcome to index.php 2 < ...

  6. 【PTA】5-1 输入一个正整数n，再输入n个学生的姓名和百分制成绩，将其转换为两级制成绩后输出。

    5-1 输入一个正整数n,再输入n个学生的姓名和百分制成绩,将其转换为两级制成绩后输出.要求定义和调用函数set_grade(stu, n),其功能是根据结构数组stu中存放的学生的百分制成绩scor ...

  7. Web开发之Cookie and Session

    会话 什么是会话? 简单说:用户开一个浏览器,点击多个超链接,访问服务器的多个web资源,然后关闭浏览器,整个过程就称之为一个会话. 会话过程要解决什么问题 每个用户在使用浏览器与服务器进行会话的过程 ...

  8. 《剑指offer》面试题19. 正则表达式匹配

    问题描述 请实现一个函数用来匹配包含'. '和'*'的正则表达式.模式中的字符'.'表示任意一个字符,而'*'表示它前面的字符可以出现任意次(含0次).在本题中,匹配是指字符串的所有字符匹配整个模式. ...

  9. JS调用堆栈

    调用栈 JavaScript 是一门单线程的语言,这意味着它只有一个调用栈,因此,它同一时间只能做一件事.如果我们运行到一个函数,它就会将其放置到栈顶.当从这个函数返回的时候,就会将这个函数从栈顶弹出 ...

  10. rocketmq学习之-基本样例

    1 基本样例 在基本样例中我们提供如下的功能场景: 使用RocketMQ发送三种类型的消息:同步消息.异步消息和单向消息.其中前两种消息是可靠的,因为会有发送是否成功的应答. 使用RocketMQ来消 ...