转载请注明来源：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. 面试题68 - II. 二叉树的最近公共祖先

    <搜索树结点> <获取路径> 题目描述 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先. 百度百科中最近公共祖先的定义为:"对于有根树 T 的两个结点 p.q ...

  2. Windows 10 如何在当前位置打开 CMD 命令窗口？

    方法一 Win + R 键召唤出运行窗口,然后输入 "CMD" 打开命令提示符. 使用 cd 命令更改当前命令提示符的工作环境. 注释 cd/ - 退到当前所在盘符 cd.. - ...

  3. Python操作数据库实战

    pymysql # -*- coding: utf-8 -*- """ @Datetime: 2018/12/26 @Author: Zhang Yafei " ...

  4. git和命令行 配置proxy请求

    GIT中的操作 设置全局代理 git config --global http.proxy socks5://127.0.0.1:8088 git config --global http.proxy ...

  5. JDK8 一文搞定👍

    ! https://zhuanlan.zhihu.com/p/442182870 Java8 新特性 学习来源于 B站 尚硅谷yyds Java学习源码 2021/11/22 距离,过年还有 57 天 ...

  6. 额外空间复杂度O(1) 的二叉树遍历 → Morris Traversal，你造吗？

    开心一刻 一天,有个粉丝遇到感情方面的问题,找我出出主意 粉丝:我女朋友吧,就是先天有点病,听不到人说话,也说不了话,现在我家里人又给我介绍了一个,我该怎么办 我:这个问题很难去解释,我觉得一个人活着 ...

  7. 《剑指offer》面试题37. 序列化二叉树

    问题描述 请实现两个函数,分别用来序列化和反序列化二叉树. 示例:  你可以将以下二叉树: 1 / \ 2 3 / \ 4 5 序列化为 "[1,2,3,null,null,4,5]&quo ...

  8. 搭建服务器之文件共享cifs，nfs，samba

    cifs: 微软系统中用于网上邻居共享的一个机制,在linux下也可以通过命令mount -t cifs .....来挂载共享的文件目录等. nfs: linux之间的共享文件方式,基于rpc ser ...

  9. CTF web安全45天入门学习路线

    前言 因为最近在准备开发CTF学习平台,先做一个学习路线的整理,顺便也是对想学web的学弟学妹的一些建议. 学习路线 初期 刚刚走进大学,入了web安全的坑,面对诸多漏洞必然是迷茫的,这时的首要任务就 ...

  10. AOP-底层原理

    AOP(底层原理) 1,AOP底层使用动态代理 (1)有两种情况动态代理 第一种 有接口情况,使用JDK动态代理 *创建接口实现类代理对象,增强类的方法 第二种 无接口情况,使用CGLIB动态代理 * ...