不使用border-radius,实现一个可复用的高度和宽度都自适应的圆角矩形

现在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: 0;
  padding:0 10px;
  font-size: 12px;
  line-height: 24px;
  white-space: pre-wrap;
}
时间: 2024-10-08 14:34:37

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

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

转载自http://www.runoob.com/w3cnote/android-tutorial-customer-baseadapter.html   作者:coder-pig 本节引言: 如题,本节给大家带来的是构建一个可复用的自定义BaseAdapter,我们每每涉及到ListView GridView等其他的Adapter控件,都需要自己另外写一个BaseAdapter类,这样显得非常麻烦, 又比如,我们想在一个界面显示两个ListView的话,我们也是需要些两个BaseAdapter

Android基础入门教程——2.4.7 构建一个可复用的自定义BaseAdapter

Android基础入门教程--2.4.7 构建一个可复用的自定义BaseAdapter 标签(空格分隔): Android基础入门教程 本节引言: 如题,本节给大家带来的是构建一个可复用的自定义BaseAdapter,我们每每涉及到ListView GridView等其他的Adapter控件,都需要自己另外写一个BaseAdapter类,这样显得非常麻烦, 又比如,我们想在一个界面显示两个ListView的话,我们也是需要些两个BaseAdapter- 这,程序员都是喜欢偷懒的哈,这节我们就来写

开源一个C#写的Android和IOS都能跑的 打击感强的RPG玩玩。

不废话直接上图 关于下载和打开 没错,我强调过很多次的,Unity3D开发的.  如果你还不懂Unity3D 的基本开发套路,如何打开Unity如何安装Unity这些问题.我建议你先不要索要源代码. 下载后,直接打开这个工程......  然后打开根目录下载ManTuLanSi这个Scence  ,如果你是用PC,就可以按  ASDW开前  来控制前后左右.痛快的打一下怪吧. 源代码齐全吗?? 因为美术资源是别人的,所以实际源代码会有部分美术资源替换了.不过,代码还是这份代码.完全没变. 能商用

一个球从100m高度自由落下,第10次反弹多高

.一个球从100m高度自由落下,每次落地后反跳回原来高度的一半,再落下,再反弹.求它在第10次落地时,共经过多少米?第10次反弹多高   float h = 100;//初始高度//   //反弹高度//    float sum = 0;//走过的路程    //这是不知道谈几次的循环,所以应该考虑是不是需要用while循环    for (int i = 1; i < 11; i++) {           sum +=h +  h / 2;           h = h / 2 ;  

C#正则表达式基础 . 一个字符 除了回车,其他的都符合

1.代码 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Net; 5 using System.Text; 6 using System.Text.RegularExpressions; 7 using System.Threading.Tasks; 8 9 namespace ConsoleApplication7 10 { 11 class Program 12

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

<英雄指南>继续前行.接下来,我们准备添加更多的组件. 将来会有更多的组件访问英雄数据,我们不想一遍一遍地复制粘贴同样的代码. 解决方案是,创建一个单一的.可复用的数据服务,然后学着把它注入到那些需要它的组件中去. 我们将重构数据访问代码,把它隔离到一个独立的服务中去,让组件尽可能保持精简,专注于为视图提供支持. 在这种方式下,借助模拟服务来对组件进行单元测试也会更容易. 因为数据服务通常都是异步的,我们将在本章创建一个基于承诺 (Promise)的数据服务. 当然,一开始我们还是要让我们的程

使用element-ui二次封装一个可复用弹窗组件

源码链接:可复用弹窗组件 组件: <template> <transition name="el-fade-in"> <div v-if="modalCfg.visible" style="width:100%;height:100%;position:fixed;top:0px;left:0px;z-index:8;"> <!-- 遮罩 --> <div class="ces-ma

2.Border Layout 自定义一个Layout来完成布局。

目标: 1.每一个被添加到布局里的控件都是QLayoutItem,我们根据方位添加. 2.定义一个结构体 ItemWrapper.里面包含QLayoutItem和方位. 阅读官方文档: To make your own layout manager, implement the functions addItem(), sizeHint(), setGeometry(), itemAt() and takeAt(). You should also implement minimumSize()

使用element-ui二次封装一个可复用编辑表单组件

源码:可复用表单组件 组件代码: <!-- 搜索表单 --> <template> <el-form ref='editForm' :size="size" inline :label-width="labelWidth" :model="editData" :rules="editRules"> <el-form-item v-for='item in editCfg' :label