CSS渐变效果

最新推荐文章于 2024-09-19 16:37:46 发布

fxy流年无悔

最新推荐文章于 2024-09-19 16:37:46 发布

阅读量462

点赞数

分类专栏： web 文章标签： css

本文链接：https://blog.csdn.net/a716121/article/details/52150633

版权

web 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

一：线性渐变属性--->linear-gradient

background-image: linear-gradient(circle , orange, green);

二：径向渐变属性--->radial-gradient

background-image: radial-gradient(circle, orange, green);

两者都有repeating功能

效果：

index.html:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<title>CSS3渐变效果</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>我是HTML5</div>
</body>
</html>

style.css

@charset "utf-8";
div{
	width: 500px;
	height: 200px;
	/*background-color: green;*/

/*	background-image: linear-gradient( orange, green);
	background-image: linear-gradient( to top right, orange, green);*/

/*角度0-360逆时针*/
	/*background-image: linear-gradient(45deg, orange 0%, green ,blue,red 100%);*/

    /*background-image: linear-gradient( -45deg, orange , green,blue 250px,red);*/

    /*background-color: red;
    background-image: linear-gradient(to top right,rgba(0,0,0,0.6),rgba(0,0,0,0));
*/

    /*background-image: repeating-linear-gradient( orange 10px, green 30px);*/

    /*background-image: radial-gradient(circle, orange, green);*/

    /*background-image: radial-gradient(circle at top right, orange, green);*/

    /*background-image: radial-gradient(circle closest-side, orange, green);*/
    /*background-image: radial-gradient(circle , orange, green);*/
    background-image: repeating-radial-gradient(circle  20px, orange, green);
}

ppt: