search

Home >Web Front-end >HTML Tutorial >CSS3 border rounded corners implementation_html/css_WEB-ITnose

CSS3 border rounded corners implementation_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:44:271228browse

Syntax 

border-radius:length|percentage {1,4}

  • length: Set the object’s corner radius length with a length value. Negative values ​​are not allowed
  • percentage: Sets the object’s corner radius length as a percentage. Negative values ​​are not allowed
  • {1,4} means that the attribute supports 1~4 parameter values;
    • Parameter explanation
  • One parameter:
  • All radii are equal, clockwise, from upper left corner to lower left corner

  • Two parameters: diagonal angles are equal.

  • First parameter: upper left corner = right Lower corner;
  • The second parameter: upper right corner = lower left corner

  • Three parameters.

  • The first parameter: upper left corner;
  • Second parameter: upper right corner = lower left corner;
  • Third parameter: lower right corner

  • Four parameters:

  • From the upper left corner to the lower left corner, clockwise
    • Browser prefix
    1. Mozilla (Firefox, Flock and other browsers): -moz-
    2. WebKit (Safari, Chrome and other browsers): -webkit-
    3. Opera browser: -o-
    4. Trident (IE): -ms-

    General The private prefix is ​​first and the default attribute is last, because the page is parsed from top to bottom 

        -moz-border-radius : 10px;    -webkit-border-radius : 10px;    -o-border-radius : 10px;    -ms-border-radius : 10px;    border-radius : 10px;
    Compatibility

    Example

    ##Rendering;

    #Code

    <!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>CSS圆角实现</title>  <style type="text/css"> /* 方块样式定义 正方形要产生圆形:半径等于宽或高(border+padding+content)的一半 要注意块的总大小 = border(around)+padding(around)+content(around)+margin(around) */ div { width: 150px; height: 150px; background: #000000; padding: 50px; margin: 50px; } div p { text-align: center; color: #5b90e7; font-size: 15px; font-weight: 700; line-height: 20px; } span{display:inline-block;} ul { padding: 0; margin: 0; list-style: none; display: inline-block; } ul li { float: left; } /* border-radius */ ul .T11 { border-top-left-radius: 125px; } ul .T22 { border-top-right-radius: 125px; } ul .T33 { border-bottom-right-radius: 125px; } ul .T44 { border-bottom-left-radius: 125px } ul .T1 { border-radius: 125px } ul .T2 { border-radius: 125px 60px; } ul .T3 { border-radius: 125px 90px 45px } ul .T4 { border-radius: 125px 90px 45px 20px; } </style></head><body>  <ul>    <li>      <div class="T11">        <p>border-top-left-radius:125px</p>      </div>    </li>    <li>      <div class="T22">        <p>border-top-right-radius:125px</p>      </div>    </li>    <li>      <div class="T33">        <p>border-bottom-right-radius:125px</p>      </div>    </li>    <li>      <div class="T44">        <p>border-bottom-left-radius:125px</p>      </div>    </li>  </ul>  <span>精确到每个部位的角度写法</span>  <hr>  <ul>    <li>      <div class="T1">        <p>一个参数:所有半径相等</p  <p>border-radius:125px</p>      </div>    </li>    <li>      <div class="T2">        <p>两个参数:对角相等.第一个参数:左上角=右下角;第二个参数:右上角=左下角</p>        <p>border-radius:125px 60px;</p>      </div>    </li>    <li>      <div class="T3">        <p>三个参数.第一个参数:左上角;第二个参数:右上角=左下角;第三个参数:右下角</p>        <p>border-radius:125px 90px 45px</p>      </div>    </li>    <li>      <div class="T4">        <p>四个参数:自左上角到左下角,顺时针</p>        <p>border-radius:125px 90px 45px 20px;</p>      </div>    </li>  </ul>  <span>精确到每个部位的角度缩写</span></body></html>
    Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：css intercepts the string, if the title is too long, use _html/css_WEB-ITnose insteadNext article：css intercepts the string, if the title is too long, use _html/css_WEB-ITnose instead

    Related articles

    See more