圆角样式和渐变色样式

1. 圆角样式

圆角样式（border-radius），是W3C制定出来使默认显示为矩形的块元素展示一个弧形边缘的样式

1.2. 圆角样式原理详解

圆角样式border-radius基本原理
首先先将内容方块区域大小显示出来，然后在方块的四个角贴上你设置的半径大小的四个圆，将边角超出园的区域隐藏，就是圆角样式的最终呈现效果。

1.2.1圆角样式border-radius的样式值格式

圆角样式如同margin一样，可以单独对每个边角的小圆设置一个不一样的半径值，这样我们就可以利用圆角样式设计出各式各样的图形出来
四个属性值：Border-radius：50px 30px 80px 150px; 两个属性值：左上 右上 右下 左下

圆角样式border-radius的样式值格式
单个属性值
Border-radius：50px; 单个属性值：四个小圆的半径相同；

** 两个属性值**
Border-radius：50px 130px; 两个属性值：左上与右下，左下与右上；

三个属性值
Border-radius：50px 130px 150px; 两个属性值：左上 右上与左下 右下

圆角样式border-radius的单例型写法

border-top-left-radius