css3的圆角边框实际是在矩形的是个角分别做内切圆，然后通过设置内切圆的半径来控制圆角的弧度。

css3的圆角边框使用border-radius实现。基本语法是：border-radius：1-4 length|%/1-4 length | %

length 的值不可为负值，/的前面的值是水平半径，后面的值但是垂直半径，无/则水平和垂直一样。顺序是top-left、top-right、bottom-fight、bottom-left，省略bottom-left，则与top-right相同，省略bottom-right与top-left相同，省略top-left与top-right相同

写法：border-top-left-radius：左上角
border-top-right-radius：右上角
border-bottom-left-radius：右下角
border-bottom-left-radius：左下角

画一个双圆例子如下

< ! DOCTYPE < ! DOCTYPE html > < html lang = "en" > < meta charset = "UTF-8" > < title > Title < /title > < style > padding: 0px ; margin: 0px ; } #one{ width: 400px ; height: 400px ; background-color: aqua ; border-radius: 50% ; float: left ; position: fixed ; #two{ float: left ; width: 100px ; height: 100px ; background: white ; border-radius: 50px ; position: fixed ; left: 150px ; top:150px ; < /style > < /head > < div id = "one" > < /div > < span id = "two" > < /span > < /body > < /html >

画一个正方形利用border-radius属性：

< ! DOCTYPE < ! DOCTYPE html > < html lang = "en" > < meta charset = "UTF-8" border-radius 圆角DOM文档中结构如下：&lt;div&gt;&lt;/div&gt;设置参数：各种长度单位都可以：px，%，…，%有时很方便，但宽高不一致时不太好    1、参数个数1：四个方向都一样-----------border-radius: 一样当宽、高相同时，四个方向设置相同的数值可以将正方形转变成一个圆： CSS 样式 如下:div{     width:100px; css3 的 过渡 使用transition属性来定义，transition属性的基本语法如下 transition:property duration timing -function delay; transition是一个复合属性，由4个属性构成。 transition-property:规定 应用 过... transition 是简写属性，可以一次同时写下面4个属性的值；一般也推荐直接简写； transition-property 规定 应用 过渡 的 CSS 属性的名称。（宽、高、边距、颜色等） 默认值：all transition-duration 定义 过渡 效果花费的时间。 默认值： 0 transition-timing-function 规定过...