css学习一

一直知道css很强大，最近整理了一些

1、linear-gradient css 中的一个渐变的函数，用于创建一个表示两种或多种颜色线性渐变的图片
用在三个场景下：background， background-img, border-img
（1）background

background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); 
// 左上角开始，颜色渐变

如下图：

（1）background-img

background-image: linear-gradient( red 10%, yellow 20%, blue);

如下图：

（3）border-img

            width: 200px;
            height: 200px;
            border: 100px solid;
            border-image-source: url(./timg.jpg);
            border-image-slice: 400;

border-image-slice: 50;

  border-image-slice: 200;

2、animation和上面linear-gradient联合起来，是的页面背景渐变且美观

	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;  // 设置成400%很有必要
	animation: gradient 15s ease infinite;

@keyframes gradient {
     
	0% {
     
		background-position: 0% 50%;
	}
	50% {
     
		background-position: 100% 50%;
	}
	100% {
     
		background-position: 0% 50%;
	}
}

如下图：