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自上而下渐变,参数如下:

H5C3练习心得12.18(时间轴效果)--linear-gredient,border-radius_第1张图片

  • 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% 来避免浏览器不必要的计算

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

 

你可能感兴趣的:(html,前端)