**圆角样式与渐变色样式**
1**、什么是圆角样式border-radius**
圆角样式（border-radius），是W3C制定出来使默认显示为矩形的块元素展示一个弧形边缘的样式
2、圆角样式border-radius的样式值格式
圆角样式如同margin一样，可以单独对每个边角的小圆设置一个不一样的半径值，这样我们就可以利用圆角样式设计出各式各样的图形出来
四个属性值
Border-radius：50px 30px 80px 150px; 两个属性值：左上 右上 右下 左下
单个属性值
Border-radius：50px; 单个属性值：四个小圆的半径相同；
两个属性值
Border-radius：50px 130px; 两个属性值：左上与右下，左下与右上；
三个属性值
Border-radius：50px 130px 150px; 两个属性值：左上 右上与左下 右下
圆角样式border-radius的单例型写法
border-top-left-radius:50px;
/左上角小圆半径/
border-top-right-radius:30px;
/右上角小圆半径/
border-bottom-right-radius:80px;
/右下角小圆半径/
border-bottom-left-radius:150px;
/左下角小圆半径/
圆角样式border-radius的椭圆设计
border-radius的属性值可分为两段，由一个反斜杠隔开 反斜杠前面的值为横轴值，反斜杠后的为纵轴值，椭圆的写法与圆角类似，反斜杠前后皆为独立的，语法和简写都一样。
圆角样式border-radius的注意点1
border-top-left-radius:200px;/左上角小圆半径/ 
圆角样式border-radius的注意点2
<img src=”C:\U
圆角样式border-radius的注意点3
border-radius 这个属性还有另外一个鲜为人知的真相，它不仅可以接受长度值，还可以接受百分比值。这个百分比值会基于元素的尺寸进行解析，即宽度用于水平半径的解析，而高度用于垂直半径的解析。这意味着相同的百分比可能会计算出不同的水平和垂直半径
width:1000px;
height:500px;
border-radius:50% 50%;/横轴半径为50%，纵轴半径为50%/
什么是渐变色
渐变色的定义：所谓渐变色，一般是指在两个及以上的颜色之间呈现一种平滑的过渡效果，该效果是矢量效果，不会因为页面的放大而出现模糊的情况，CSS3中定义了两种渐变类型，一种为线性渐变，一种为径向渐变，还有一种目前应用不广但是很有前途的角向渐变
线性渐变色
其实我们完全可以把给元素设置颜色理解为给一堵墙刷一个油漆，这个油漆怎么刷完全是由户主自己决定的，我们传统的方法要么是给墙刷一个颜色的油漆，要么是给墙上贴一张海报（background-image），而渐变色则是给墙上刷多种颜色。
线性渐变色方向
我们还可以在颜色前面加上方向控制，渐变色默认给咱们加的是从上往下：linear-gradient(to bottom，red 0%,blue 100%)，我们可以通过对to后面的方向进行自定义可实现不同的效果，如
线性渐变色方向
从左上到右下
linear-gradient(to bottom right, #abcdef, #b078b4)
左上紫右下蓝
角度值方向
linear-gradient(0deg, purple 50%, blue 50%）
下紫上蓝
deg：是角度
径向渐变色
径向渐变和线性渐变的唯一不同就是添加颜色的方向，径向渐变类似画同心圆，一层层的往外面画圈圈。
最后选中的油漆颜色
到100%，最后的位置刷蓝色油漆
渐变色重要关注点1
渐变色用于背景时，是以背景图片的形式展示的！！！！！！
所以可以使用背景图片的所有样式特性，如大小，位置，基点，剪切等、
重复渐变色和渐变色重复
repeating-linear-gradient() 和 repeating-radial-gradient()。
它们的工作方式跟前两者类似，只有一点不同：色标是无限循环重复的，直到填满整个背景。
repeating-linear-gradient
列：
repeating-radial-gradien
列：
