现在css3支持圆角矩形，但是为了兼容性问题，虽然比较麻烦，但还是有必要了解一下以下方法。

在一个div内，包含8个div，控制这个8个div的height、margin以及border属性值，以达到圆角矩形效果,不过要注意div的顺序。

html代码：

<body>

  <div class="bor">

    <div class="b1"></div>

    <div class="b2"></div>

    <div class="b3"></div>

    <div class="b4"></div>

  </div>

  <div class="mid">

    <p>不使用border-radius的情况下实现一个可复用的高度和宽度都自适应的圆角矩形</p>

  </div>

  <div class="bor">

    <div class="b4"></div>

    <div class="b3"></div>

    <div class="b2"></div>

    <div class="b1"></div>

  </div>

</body>

css代码：

.bor div { height: 1px; }

  .b1 {

    margin: 0 3px;

    background-color: black;

   }

  .b2,

  .b3,

  .b4,

  .mid {

    border-left: 1px solid black;

    border-right: 1px solid black;

  }

  .b2 {

    margin: 0 2px;

  }

  .b3 {

    margin: 0 1px;

  }

  .b4 {

    margin: 0 1px;

  }

.mid p {

  margin:;

  padding:0 10px;

  font-size: 12px;

  line-height: 24px;

  white-space: pre-wrap;

}

不使用border-radius，实现一个可复用的高度和宽度都自适应的圆角矩形的更多相关文章

  1. Android学习笔记-构建一个可复用的自定义BaseAdapter

    转载自http://www.runoob.com/w3cnote/android-tutorial-customer-baseadapter.html   作者:coder-pig 本节引言: 如题, ...

  2. 编写一个可复用的SpringBoot应用运维脚本

    前提 作为Java开发者,很多场景下会使用SpringBoot开发Web应用,目前微服务主流SpringCloud全家桶也是基于SpringBoot搭建的.SpringBoot应用部署到服务器上,需要 ...

  3. 实现一个div，左边固定div宽度200px，右边div自适应

    实现一个div,左边固定div宽度200px,右边div自适应<div class= "container"> <div class="left&quo ...

  4. 每一个成功的程序员的身后都有一个--------Parse

    相信好多同行都用过Parse,而正是因为Parse给我们的开发带来的极大的便利,才有了项目从零开始,到正式上线仅仅用上不到两周的时间,现在Swift还在迅速的发展,很快就会占有大量的市场,现在就就结合 ...

  5. Android 如何添加一个apk使模拟器和真机都编译进去 m

    添加一个apk都需要将LOCAL_PACKAGE_NAME的值添加到PRODUCT_PACKAGES才行.而PRODUCT_PACKAGES一般在build/target/product/目录下的文件 ...

  6. 自定义一个可复用的BaseAdapter

    1.我们一点点开始改: 首先我们自定义BaseAdapter,等下我们就要对他进行升级改造 /** * Created by Jay on 2015/9/21 0021. */ public clas ...

  7. NG2-我们创建一个可复用的服务来调用英雄的数据

    <英雄指南>继续前行.接下来,我们准备添加更多的组件. 将来会有更多的组件访问英雄数据,我们不想一遍一遍地复制粘贴同样的代码. 解决方案是,创建一个单一的.可复用的数据服务,然后学着把它注 ...

  8. Python爬虫之编写一个可复用的下载模块

    看用python写网络爬虫第一课之编写可复用的下载模块的视频,发现和<用Python写网络爬虫>一书很像,写了点笔记: #-*-coding:utf-8-*- import urllib2 ...

  9. 如果用css的border属性画一个三角形

    假设页面中有个div,如何通过css做一个三角形.这是我们项目中用到的今天就稍微总结下.顺便说一句偷偷写博客的感觉还挺爽 div { width: 0; height: 0; border-top: ...

随机推荐

  1. JS知识点备忘

    做前端久了,会发现很多比较杂的知识点,平时很少用到(往往在面试的时候经常见到),但是遇到的时候会很揪心...所以遇到的时候把它记录下来,但求有个印象,再次遇到时,可以在这里快速找到解决. 1.文档碎片 ...

  2. 基于Android 平台简易即时通讯的研究与设计[转]

    摘要:论文简单介绍Android 平台的特性,主要阐述了基于Android 平台简易即时通讯(IM)的作用和功能以及实现方法.(复杂的通讯如引入视频音频等可以考虑AnyChat SDK~)关键词:An ...

  3. android学习日记18--Adapter简介

    一.Adapter 1.简述 最近学的GridView和Gallery 都有用到Adapter适配器,发现它貌似蛮重要的.专门上网搜了下有关Adapter的资料.android绝大多数应用是JAVA语 ...

  4. Linux下批量改动名字方法

    如果任务是把文件夹下全部的.log后缀文件名称中的2014去掉. 方法一) 脚本 这样的方法通过ls把当前文件夹下全部的文件进行遍历,然后获取文件名称,进行mv操作.例如以下: #!/bin/sh f ...

  5. js用斜率判断鼠标进入div的四个方向

    网上大部分判断鼠标移入div移入移出都是使用一下方法: 这个方法确实十分奇特,使用起来十分方便. 后来自己看了一些文章,看到有另一种以斜率的方法来判断鼠标的移动方向. 上图是此方法的示意图,以浏览器左 ...

  6. 类名.class与类名.this详解

    类名.class      我们知道在java中,一个类在被加载的时候虚拟机就会自动的生成一个这个类的一个Class类型的“类对象”,每个类都对应着一个这样的类对象,通过这个Class类型的类对象,我 ...

  7. RabbitMQ 原文译1.2--"Hello Word"

    本系列文章均来自官网原文,属于个人翻译,如有雷同,权当个人归档,忽喷. .NET/C# RabbitMQ 客户端下载地址:https://github.com/rabbitmq/rabbitmq-do ...

  8. VBA实现随意输入组合码，查询唯一标识码

    记录背景: 需要在excel中查询出组合码,对应的唯一标识码. 举例 组合码:4+5+6+9+1*2   标识码:A1 界面随意输入组合码:1*2+4+5+6+9  输出标识码:A1 VBA实现: P ...

  9. ios fix UIRefreshControl bug

    NS_CLASS_AVAILABLE_IOS(6_0)   UIRefreshControl 有个毛病有时会出bug  动画下拉就不动了,这里给出修复处理: @interface UICollecti ...

  10. ###《More Effective C++》- 异常

    More Effective C++ #@author: gr #@date: 2015-05-24 #@email: forgerui@gmail.com 九.利用destructors避免泄漏资源 ...