08.圆角样式和渐变色样式

08.圆角样式和渐变色样式

1.圆角样式

圆角样式：W3C制定出来使默认显示为矩形的块元素展示一个弧形边缘的样式。

浏览器默认每一个块元素都是一个矩形区域，那么当我们给一个块元素设置了border-radius之后浏览器到底做了些什么才让一个矩形区域出现一个圆角效果呢？

boder-ridus：给矩形区域的四个角设置一个圆，而浏览器会将多余的部分去掉，从而显示的过程为：

圆角样式如同margin一样，可以单独对每个边角的小圆设置一个不一样的半径值，这样我们就可以利用圆角样式设计出各式各样的图形出来。

四个属性值
Border-radius：50px 30px 80px 150px; 两个属性值：左上 右上 右下 左下。

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

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

圆角样式border-radius的椭圆设计

boder-ridus： 横轴值/纵轴值。由一个反斜杠组成。

注意：

若矩形的边框和高度分别为200px，200px，而设置的圆半径大于100px。如半径为200px，则效果图如下：

另外，boder-ridus：的值还可以是百分制，如width:1000px;
border-radius:50% 50%; 横轴半径为50%，纵轴半径为50%

2.渐变色

渐变色：所谓渐变色，一般是指在两个及以上的颜色之间呈现一种平滑的过渡效果，该效果是矢量效果，不会因为页面的放大而出现模糊的情况，CSS3中定义了两种渐变类型，一种为线性渐变，一种为径向渐变，还有一种目前应用不广但是很有前途的角向渐变。

线性渐变：linear-gradient(to bottom，red 0%,blue 100%)方向不写默认是从上往下。方向也可以是度数，0deg

其实我们完全可以把给元素设置颜色理解为给一堵墙刷一个油漆，这个油漆怎么刷完全是由户主自己决定的，我们传统的方法要么是给墙刷一个颜色的油漆，要么是给墙上贴一张海报（background-image），而渐变色则是给墙上刷多种颜色。

径向变色:径向渐变和线性渐变的唯一不同就是添加颜色的方向，径向渐变类似画同心圆，一层层的往外面画圈圈。

radial-gradient(purple 0%, blue 100%).

渐变色用于背景时，是以背景图片的形式展示的！！！！！！
所以可以使用背景图片的所有样式特性，如大小，位置，基点，剪切等

重复渐变色

repeating-linear-gradient() 和 repeating-radial-gradient()。
它们的工作方式跟前两者类似，只有一点不同：色标是无限循环重复的，直到填满整个背景。

-gradient()。
它们的工作方式跟前两者类似，只有一点不同：色标是无限循环重复的，直到填满整个背景。