(一)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% 来避免浏览器不必要的计算
今天的心得就到这里啦,晚安。