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

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

php中文网

发布： 2016-05-20 16:51:07

原创

1493人浏览过

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

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

Fireflies.ai

自动化会议记录和笔记工具，可以帮助你的团队记录、转录、搜索和分析语音对话。

160

查看详情

html代码：

<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

  <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bor"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="b1"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="b2"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="b3"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="b4"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

  <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="mid"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>不使用border-radius的情况下实现一个可复用的高度和宽度都自适应的圆角矩形<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

  <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bor"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="b4"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="b3"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="b2"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="b1"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>


<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

登录后复制

css代码：

<span style="color: #800000;">.bor div </span>{<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 1px</span>; }<span style="color: #800000;">

  .b1 </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 3px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> black</span>;
   }<span style="color: #800000;">

  .b2,
  .b3,
  .b4,
  .mid </span>{<span style="color: #ff0000;">
    border-left</span>:<span style="color: #0000ff;"> 1px solid black</span>;<span style="color: #ff0000;">
    border-right</span>:<span style="color: #0000ff;"> 1px solid black</span>;
  }<span style="color: #800000;">

  .b2 </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 2px</span>;
  }<span style="color: #800000;">

  .b3 </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 1px</span>;
  }<span style="color: #800000;">

  .b4 </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0 1px</span>;
  }<span style="color: #800000;">

.mid p </span>{<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;">0 10px</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">
  line-height</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;">
  white-space</span>:<span style="color: #0000ff;"> pre-wrap</span>;
}

登录后复制