CSS3边框圆角详解-优快云博客

CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。

在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。

前缀	浏览器
-webkit	chrome和safari
-moz	firefox
–ms	IE
–o	opera

边框

CSS3边框圆角效果 border-radius
border-radius是向元素添加圆角边框。

border-radius:10px; 所有角都使用半径为10px的圆角
border-radius: 5px 4px 3px 2px; 四个半径值分别是左上角、右上角、右下角和左下角(简称上右下左)，顺时针
border-radius的值建议用px单位
实心上半圆

div{ 
    height:100px;
    width:50px;
    background:#9da;
    border-radius:50px 50px 0px 0px;
    }

实心上半圆原理：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）简称上右的半径值一样，下左的半径值为0px

实心下半圆

div{ 
    height:100px;
    width:50px;
    background:#9da;
    border-radius:0px 0px 50px 50px;
    }

与实心上半圆原理相反，左下角与右下角，即上右为0，下左半径值为一样
实心圆
把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。如下代码

div{
    height:100px;/*与width设置一致*/
    width:100px;
    background:#9da;
    border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
    /*四个圆角值也可用百分比代替，如下代码*/
    border-radius:50%;
    }

实心左上半圆

div{ 
    height:100px;
    width:50px;
    background:#9da;
    border-radius:50px 0px 0px 0px;
    }

原理：只设置左上半角的半径

CSS3-圆角边框

边框