前端第七课--圆角样式和渐变色样式

圆角样式和渐变色样式

圆角样式

border-radius:50px;(改变的是四个角的样式)

border-radius:50px 20px(第一个值时左上角和右下角的样式同理第二个值是右上角和左下角的样式)

border-radius:50px 20px 30px(第一个值是左上角，第二个值是右上角和左下角，第三个值是右下角)

四个值的时候就是从左上角开始顺时针旋转设置样式；也可以使用%设置圆得半径，其半径大小为宽*百分比；

只改变一个角：border-bottom-right-radius:100px;(右下角)

椭圆的样式变化：

四个角一组值：border-radius:100px/20px;(长半轴为100px,短半轴为20px,中间的/是必要的)

四个角四个值：border-radius:100px 80px 59px 70px/20px;(/前面的四个值是四个角椭圆的长半轴后面是短半轴)

**正方形盒设置弧形样式的本质：**其实是将盒子区域分为四等分，每一个圆形、占据每个区域；设置其半径的大小，半径最大为宽的一半即使设置的半径比宽的一半大也默认为一半。（特例，若四个值中只设置了一个且该值的大小为和宽的值相等，即使该值的比宽还要大，其效果是以宽的为半径的四分之一圆）。

**长方形设置弧形的样式：**依旧是将盒子分为四等分，每个圆形占领一个区域，但此时圆的半径最大是宽或高中最短那一边的长度；（特列只设置左上和左下或者是设置右上和右下可实现半圆半径大小最大为宽和高的最小值）；

在长方形中设置椭圆样式，可以将长方形割成椭圆；

渐变色样式

线性渐变式：

background-image:linear-gradient(red 0%,blue 20%,yellow 100%);从开始的0%100%最后的位置；

解释：这里面第一个颜色百分号前面的数字表示的是颜色条在整个区域中所占的比例。

最后一个颜色前面的数字是指该颜色条的初始位置在区域中的位置，以及该位置以后的区域都为该颜色。

中间的颜色前面的数字所表示的是该颜色条在区域当中的位置；

颜色渐变的方向:

颜色的渐变默认是从上到下的

设置从左到右：linear-gradient(to right ,red 0%,blue 20%, yellow 100%);

设置从左上到右下：linear-gradient(to bottom right,red 0%,blue20%,yellow 100%);

角度值方向：linear-gradient( 0deg,red 0%,blue 20%,yellow 100%);

径向渐变式：

径向渐变类似画同心圆，一层层的往外面画圈圈；background-image:radial-gradient(red 0%,blue 29%,yellow 100%);

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

使用背景图片演示的复合写法：background：linear-gradient(-45deg,red 50%,blue 50%) top left/100px 100px no-repeat,radial-gradient(red,pink)right bottom/100px 100px no-repeat,white;

nt(red,pink)right bottom/100px 100px no-repeat,white;

background:渐变方式，背景图片开始的基点/渐变色的大小，repeat,下一个渐变样式……，背景颜色的设置；