码迷,mamicode.com
首页 > Web开发 > 详细

CSS3边框圆角实现

时间:2015-05-15 19:56:51      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:css3圆角实现   css3圆角   css3-radiu   css椭圆   css圆形   

语法

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>

CSS3边框圆角实现

标签:css3圆角实现   css3圆角   css3-radiu   css椭圆   css圆形   

原文地址:http://blog.csdn.net/crper/article/details/45748519

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!