搜尋

首頁 >web前端 >html教學 >CSS3边框圆角实现_html/css_WEB-ITnose

CSS3边框圆角实现_html/css_WEB-ITnose

WBOY
WBOY原創
2016-06-24 11:44:271229瀏覽

语法 

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

  • length : 用长度值设置对象的圆角半径长度。不允许负值
  • percentage : 用百分比设置对象的圆角半径长度。不允许负值
  • {1,4}是说该属性支持1~4参数值;
    • 参数解释
  • 一个参数:
  • 所有半径相等,顺时针,自左上角到左下角

  • 两个参数:对角相等.

  • 第一个参数:左上角=右下角;
  • 第二个参数:右上角=左下角

  • 三个参数.

  • 第一个参数:左上角;
  • 第二个参数:右上角=左下角;
  • 第三个参数:右下角

  • 四个参数:

  • 自左上角到左下角,顺时针
    • 浏览器前缀
    1. Mozilla(Firefox, Flock等浏览器) : -moz-
    2. WebKit (Safari, Chrome等浏览器) : -webkit-
    3. Opera浏览器：-o-
    4. Trident (IE) :-ms-

    一般的写法私有前缀在前,默认属性在后,因为页面解析自上而下

        -moz-border-radius : 10px;    -webkit-border-radius : 10px;    -o-border-radius : 10px;    -ms-border-radius : 10px;    border-radius : 10px;
    兼容性

    例子

    ##效果图;

    #代码

    <!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>
    陳述：
    本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
    上一篇：css截取字符串，实现标题过长用代替_html/css_WEB-ITnose下一篇：微信按住说话HTML实现_html/css_WEB-ITnose

    相關文章

    看更多