H5C3练习心得12.18（时间轴效果）--linear-gredient,border-radius

(一)linear-gradient

1.定义

linear-gradient()函数用于创建两种或多种颜色线性渐变的图片

2.方法

background-image:linear-gradient(direction, color-stop1, color-stop2, ...)

它实际上不是颜色，而是背景图片。也就是说，它并不是color的属性值，而是background的属性值。

• direction:表示渐变的方向，其可以是一个具体的角度值如90deg，也可以是具体的方向值如to left表示自右向左渐变，默认为to bottom自上而下渐变，参数如下：

• color-stop:渐变色的起始位置，通常是颜色加起始位置百分比，如red 10%; 

详细的详情，想要知道更多知识点的朋友参考以下博主的博文，写得很通俗易懂：
http://t.csdnimg.cn/esS2V 

(二)border-radius

 1.什么是border-radius

border-radius是css的一个属性，主要用来给元素的外边框绘制圆角效果.

2.参数值

border-radius属性可以拆分为border-top-left-radius（左上角）、border-top-right-radius（右上角）、border-bottom-right-radius（右下角）、border-bottom-left-radius（左下角）四个属性。属性值的单位可以使用：em、px、%等等。

• px:半径值就是像素值
• em:是最常见的相对长度单位，这是排版中使用的一种度量方式，基准值是当前元素的字号大小。 在CSS中，1em表示当前元素的字号大小，实际值取决于在哪个元素上应用。
• %:以元素的宽高乘以百分数后得到半径值。

 盒子的每一个角都包含x轴和y轴的半径值，中间使用 / 符号进行分隔，/ 前后最好加一个空格。可以理解成每一个圆角都是由其x轴和y轴形成的椭圆的1/4弧。

不加 /时，border-radius可以有一个值，两个值，三个值，四个值

加 / 时，border-radius的 /前后都可以有一个值、两个值、三个值、四个值

(1) 不加 /时

• 一个值：左上、右上、右下、左下
• 两个值：第一个值代表 左上、右下；第二个值代表 右上、左下
• 三个值：第一个值代表 左上；第二个值代表 右上、左下；第三个值代表 右下
• 四个值：第一个值代表 左上；第二个值代表 右上；第三个值代表 右下；第四个值代表 左下

 解释代码如下：

border-radius:5px;
/*所有角的半径都为5px*/
border-radius:5px 10px;
/*左上角，右下角半径为5px,右上角，左下角半径为10px*/
border-radius:5px 10px 15px;
/*左上角半径为5px,右上角，左下角半径为10px,右下角半径为15px*/
border-radius:5px 10px 15px 20px;
/*左上角半径为5px，右上角半径为10px,右下角半径为15px,左下角半径为20px*/

 当然也可以一个一个单独定义，代码如下：

/*左上角半径为5px，右上角半径为10px,右下角半径为15px,左下角半径为20px*/
border-top-left-radius:5px;
border-top-right-radius:10px;
border-bottom-right-radius:15px;
border-bottom-left-radius:20px;

 (1) 加 /时

• x1 / y1 ：这种形式表示所有角的x值为x1，y值为y1
• x1 x2 / y1 ：这种形式表示左上角、右下角的x值为x1，右上角、左下角的x值为x2，y值都为y1
• x1 x2 x3 / y1 ：这种形式表示左上角的x值为x1，右上角、左下角的x值为x2，右下角的x值为x3，y值都为y1
• x1 x2 x3 x4 / y1 ：这种形式表示左上角的x值为x1，右上角的x值为x2，右下角的x值为x3，左下角的x值为x4，y值都为y1

解释代码如下： 

border-radius: 20px / 30px;
/*相当于：
所有角 20px 30px; 
border-radius: 20px 20px 20px 20px / 30px 30px 30px 30px;
*/

border-radius: 20px 40px / 30px;
/*相当于：
左上角 20px 30px; 
右上角 40px 30px; 
右下角 20px 30px;
左下角 40px 30px;
border-radius: 20px 40px 20px 40px / 30px 30px 30px 30px;
*/

border-radius: 20px 40px 10px / 30px;
/*相当于：
左上角 20px 30px; 
右上角 40px 30px; 
右下角 10px 30px;
左下角 40px 30px;
border-radius: 20px 40px 10px 40px / 30px 30px 30px 30px;
*/

border-radius: 20px 40px 10px 10px / 30px;
/*相当于：
左上角 20px 30px; 
右上角 40px 30px; 
右下角 10px 30px;
左下角 10px 30px;
border-radius: 20px 40px 10px 10px / 30px 30px 30px 30px;
*/

 3.利用border-radius制作圆形

（1）如何制作

正方形的盒子，当border-radius:50%;时可以将正方形的盒子变为圆形。

（2）border-radius：50%和100%的区别

border-radius的值是百分比的话，就相当于盒子宽度和高度的百分比。

我们知道在一个正方形内做一个面积最大的圆形，这个圆的半径就为正方形的一半，所以border-radius为50%时，则会形成圆。

那么可能有人就会问，border-radius为100%时，对应圆的半径长度不就是正方形的宽高么，这种情况下，为什么还是会形成一个和值为50%一样的圆形呢。

其实这是W3C对于重合曲线有这样的规范：如果两个相邻角的半径超过了对应盒子的边的长度，那么浏览器要重新计算保证它们不重合。

所以，建议使用border-radius = 50% 来避免浏览器不必要的计算

今天的心得就到这里啦，晚安。