转载请注明来源：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. CS5212Capstone|DP转VGA方案设计芯片|CS5212设计资料

    CS5212是台湾CAPSTONE最新开发出一款用于DP转VGA方案设计芯片,其周围器件较少,设计简单,整体BOM成本低,市场性价比较高. CS5212内置MCU是工业标准8051核心单片机处理器.C ...

  2. 使用PyTorch构建神经网络以及反向传播计算

    使用PyTorch构建神经网络以及反向传播计算 前一段时间南京出现了疫情,大概原因是因为境外飞机清洁处理不恰当,导致清理人员感染.话说国外一天不消停,国内就得一直严防死守.沈阳出现了一例感染人员,我在 ...

  3. html+css+JavaScript实现爱恩斯坦棋游戏

    title: "html+css+JavaScript实现爱恩斯坦棋游戏" author: Sun-Wind date: December 30, 2021 背景:本贴将基于前端的 ...

  4. Mybatis的联合查询

    数据库表结构 department employee 要求一 现在的要求是输入 id 把 employee 表的对应员工数据查询出来,并且查询出该员工的所处部门信息 JavaBean public c ...

  5. SpringBoot文章合集

    SpringBoot文章合集 SpringBoot合集为<尚硅谷雷神SpringBoot2零基础入门(spring boot2)>的学习以及项目中使用知识点进行整理. SpringBoot ...

  6. Hbase单点安装Version1.1.5

    Hbase单点安装,基于版本1.1.5, 使用hbase-1.1.5.tar.gz安装包. 1.安装说明 使用Hbase自带zookeeper和本地文件目录存储数据 2.安装规划 角色规划 IP/机器 ...

  7. 深入 Laravel 内核之 PHP 反射机制和依赖注入

    结论: PHP中提供了反射类来解析类的结构: 通过反射类可以获取到类的构造函数及其参数和依赖: 给构造函数的参数递归设置默认值后,即可使用这些带默认值的参数通过 newInstanceArgs 实例化 ...

  8. Python_元类

    什么是元类 我们知道,实例对象是由类创建的,那么类又是由什么创建的呢? 答案就是元类. 元类基本不会用到,但是就算不用,也应该去熟悉一下概念. 理解类也是对象 在大多数编程语言中,类就是一组用来描述如 ...

  9. css 垂直居中技巧

    CSS垂直居中技巧,我只会23个,你会几个?自古以来(是有多?~),网页CSS的垂直居中需求始终没有停过,而其困难度也始终没有让人轻松过,经过了每位开发先烈的研究后,据说CSS的垂直居中技巧已达到近十 ...

  10. java基础04-数据类型扩展及面试题

    java基础04-数据类型扩展及面试题讲解 public class demo02 { public static void main(String[] args){ // 一.整数拓展: 进制 二进 ...