> 웹 프론트엔드 > HTML 튜토리얼 > 不使用border-radius,实现一个可复用的高度和宽度都自适应的圆角矩形 - jimmie.Mr

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
풀어 주다: 2016-05-20 16:51:07
원래의
1300명이 탐색했습니다.

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

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

 

html代码:

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

  <span style="color: #0000ff;"><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 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 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 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 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 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 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 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 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 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 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 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></span></span></span></span></span></span></span></span></span></span></span></span></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>;
}
로그인 후 복사

 

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿