CSS3边框圆角实现

来源：互联网发布：db2远程连接数据库编辑：程序博客网时间：2024/04/30 04:01

语法

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

length : 用长度值设置对象的圆角半径长度。不允许负值
percentage : 用百分比设置对象的圆角半径长度。不允许负值
{1,4}是说该属性支持1~4参数值;

参数解释

一个参数:
- 所有半径相等,顺时针,自左上角到左下角
两个参数:对角相等.
- 第一个参数:左上角=右下角;
- 第二个参数:右上角=左下角
三个参数.
- 第一个参数:左上角;
- 第二个参数:右上角=左下角;
- 第三个参数:右下角
四个参数:
- 自左上角到左下角,顺时针

浏览器前缀

Mozilla(Firefox, Flock等浏览器) : -moz-
WebKit (Safari, Chrome等浏览器) : -webkit-
Opera浏览器：-o-
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>

0 0